How to parse Json arrays of objects in React JS

Question

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.

Sharath Kumar · Accepted Answer · 2020-04-15 09:35:49Z

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

edited Apr 15, 2020 at 9:35

answered Apr 15, 2020 at 5:55

Sharath Kumar

2901 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

uraniumreza Over a year ago

Please don't use the array index as key. There are performance issues on using array-index as key. You can go through this beautiful piece of article by Ken C Dodds and understand the React key prop more well - kentcdodds.com/blog/understanding-reacts-key-prop

uraniumreza · Accepted Answer · 2020-04-15 06:52:31Z

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?

Json data has been edited. I found the answer to the question.

Collectives™ on Stack Overflow

How to parse Json arrays of objects in React JS

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related