Как разобрать Json массив объектов в React JS

Question

Может ли кто-нибудь помочь мне распечатать необходимые данные в Интернете, проанализировав массив JSON объектов? В приведенном ниже примере я хочу напечатать Apple, Man go, Grapes.

Ниже приведены коды:

JSON format

{
    "data":{
        "summary": {
        'a1':13223,
        'b1': 23
        },
        "regional": [
            {
                'aa1': "Apple",
                'bb1': 456
            },
            {
                'aa1': "Mango",
                'bb1': 496
            },
            {
                'aa1': "Grapes",
                'bb1': 126
            },
        ]
    },
    'lastdata': '2946'
}

fetchApi. js

url = 'apiUrl'
export const fetchData = async () => {
    try {
    const { data } = await (await fetch(url)).json();
    const modifiedData = {
            region: [...data.regional]
        }
        return modifiedData;
    } catch (error) {
        console.log(error)
    }
}

в табличном виде. js

import { fetchData } from "../api/fetchApi";
const Tabular = () => {
    const [fetchedState, setFetchedState] = useState([])
    useEffect(() => {
        const fetchAPIState = async () => {
            const dailyData = await fetchData()
            setFetchedState(dailyData)
            console.log(dailyData) 
        }
        fetchAPIState()
    }, [])

     return (
        <>
        <h1>{}</h1>
        </>
            )
}

Когда я console.log (dailyData), результат будет следующим:

"region": [
            {
                'aa1': "Apple",
                'bb1': 456
            },
            {
                'aa1': "Mango",
                'bb1': 496
            },
            {
                'aa1': "Grapes",
                'bb1': 126
            },
        ]

Но я не могу напечатать Apple, Man go, Виноград в теге h1. Это показывает ошибку. Я пытался использовать метод карты.

Answer 1

В fetchApi. js, сделать

modifiedData = [...data.regional];

Или, в табличной форме. js, вам нужно использовать map для fetchedState.region

В части jsx (при условии, что вы сделали последнее), если вы даете один и тот же ключ всем названиям фруктов, а bb1 является уникальным идентификатором, замените <h1>{}</h1> на:

{fetchedState.region.map(e => <h1 key={e.bb1}>{e.aa1}</h1>)}

Answer 2

Итак, из вашего вопроса, что я понимаю, вы хотите визуализировать список элементов из вашего dailyData массива, верно? Если это так, то мы можем сделать это, используя javascript map() в fetchedState (потому что вы сохраняете массив dailyData в это состояние) и сгенерировать список элементов. Наконец, мы можем отобразить этот список элементов на стороне JSX. Или вы можете напрямую выполнить преобразование, т.е. map() часть на стороне JSX.

Но массив объектов dailyData, который вы дали, не имеет согласованной формы. Для создания элемента для каждого Apple , Man go, Grapes в теге h1 необходимо иметь данные / массив, в которых эти значения находятся в то же самое key/property; здесь я вижу Яблоко, Человек go, Виноград имеет 3 разных key т.е. aa1, cc1, ee1 !! Итак, вы уверены, что отображаемые вами данные верны?