javascript - How to parse Json arrays of objects in React JS - Stack Overflow

Can someone help me to print out the required data on the web by parsing JSON array of objects? In the below example, I want to print Apple, Mango, Grapes.

Below are the codes:

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)
    }
}

tabular.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>
        </>
            )
}

When I console.log(dailyData) the result is this:

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

But I am unable to print Apple, Mango, Grapes in the h1 tag. It shows error. I tried using map method.

Can someone help me to print out the required data on the web by parsing JSON array of objects? In the below example, I want to print Apple, Mango, Grapes.

Below are the codes:

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)
    }
}

tabular.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>
        </>
            )
}

When I console.log(dailyData) the result is this:

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

But I am unable to print Apple, Mango, Grapes in the h1 tag. It shows error. I tried using map method.

• javascript
• arrays
• json
• reactjs
• object

Share Follow edited Apr 15, 2020 at 8:06 kaizen asked Apr 15, 2020 at 5:48 kaizenkaizen 1,21011 gold badge1717 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

In fetchApi.js, make

modifiedData = [...data.regional];

Or, in tabular.js, you need to use map on fetchedState.region

In the jsx part(assuming you did the latter), if you give the same key to all the fruit names, and bb1 is a unique id, replace the <h1>{}</h1> with:

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

So, from your question what I understand that you want to render a list of elements from your dailyData array, right? If that's the case then we can do that by using javascript map() on the fetchedState (because you're saving dailyData array to that state) and generate the list of elements. Finally, we can render that list of elements in the JSX side. Or, you can directly do the transforming i.e. map() part in the JSX side.

But the dailyData array of objects you gave has not a consistent shape. For creating an element for each Apple, Mango, Grapes in the h1 tag you must have a data/array where these values are in the same key/property; here I can see Apple, Mango, Grapes have 3 different key i.e. aa1, cc1, ee1!! So, are you sure that the data points you are showing are correct?