Loop over Json object -- React

Question

I have a API for which I would like to loop over to get all the value of its keys. But unfortunately Iam only getting the keys for it.

My code until now:

...
  const image_link = JSON.stringify(image);
  const parsed_link = JSON.parse(image_link);
  console.log('1st link', parsed_link[0].Header)   // gives "abc.jpg"
...
...
      <div>
        {
          Object.keys(parsed_link).map((e, i) => {
            console.log(parsed_link);
            console.log(e);   // gives integers like 0,1,2 etc...
            console.log(i);   // gives integers like 0,1,2 etc...
              <img src={e} alt="something" width="300" height="200" />;
              return null;
          })
        }
      </div>
...
...

API looks like this:

                "Header": [
                    {
                        "image": "abc.jpg"
                    },
                    {
                        "image": "xyz.jpg"
                    },
                    {
                        "image": "lmn.jpg"
                    }
                ]

Please suggest, where am I goin wrong. Thanks in advance

const image_link = JSON.stringify(image); what is the value of image here? — Pratik Rathi
– Pratik Rathi, Commented Aug 20, 2021 at 6:00
You are doing .map() on Object.keys(parsed_link) which is the keys, and why you are only getting keys. Try parsed_link.map( ... ) — CHNguyen
– CHNguyen, Commented Aug 20, 2021 at 6:03

Jabal Logian · Accepted Answer · 2021-08-20 06:45:31Z

3

If you want to loop through an array, you can use map function. If you want to loop through an object, you can have to convert the object into an array using Object.keys(YOUR_OBJECT) (if you want to get the key) or Object.values(YOUR_OBJECT) (if you want to get the values) than use map function.

You can directly print the array of data into an array of views. You have to return a view like these:

YOUR_ARRAY.map((item, index) => (
    <div>YOUR VIEW</div>
))

// or

YOUR_ARRAY.map((item, index) => {
    return(
        <div>YOUR VIEW</div>
    )
})

Note: you can only return a single parent view inside the return value. If you want to return multiple views inside the return value, you have to wrap them inside a single <div></div> or <React.Fragment></React.Fragment> or <></> parent.

In your code, I saw you wrote parsed_link[0].Header. So I assume that the API returns something like this:

[
    {
        "Header": [
            {
                "image": "abc.jpg"
            },
            {
                "image": "xyz.jpg"
            },
            {
                "image": "lmn.jpg"
            }
        ],
        ...
    },
    ...
]

Here is my answer:

<div>
    {
        parsed_link[0]['Header'].map((item, index) => (
            <img 
                key={index}
                src={item} 
                alt='something' 
                width='300' 
                height='200' 
            />
        )
    }
</div>

edited Aug 20, 2021 at 6:45

answered Aug 20, 2021 at 6:30

Jabal Logian

2,3806 gold badges30 silver badges58 bronze badges

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

1 Comment

Drew Reese Over a year ago

If mapping an object, getting the array of values is probably more useful, i.e. Object.values(object).map(value => ..., or getting the array of entries if you need both the key and value when mapping, i.e. Object.entries(object).map(([key, value]) => ....

Collectives™ on Stack Overflow

Loop over Json object -- React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related