How can I loop over a JSON object in React

Question

I'm trying to retrieve information from the following JSON object data.json:

{
  "status": "ok",
  "feed": {
    "title": "NOS Nieuws",
  },
  "items": [
    {
      "title": "Test Title",
      "description": "Test description",
      "enclosure": {
        "link": "https://examplelink.com/1008x567.jpg",
        "type": "image/jpeg"
      },
      "categories": []
    },
    {
      "title": "Test Title 2",
      "description": "Test 2",
      "enclosure": {
        "link":  "link": "https://examplelink.com/1008x567.jpg",
        "type": "image/jpeg"
      },
      "categories": []
    }
  ]
}

So I want to loop over this JSON object to display all the available items and its corresponding title, description and enclosure-link.

I know i can access them separately as:

const items = data.items;
const title = items.title;
const url = items.enclosure.link;

Usually I would do a for-loop and loop through data.items[i]. However, since this is a react and an object instead of an array it works differently.

My current code:

class Feed extends Component {
  render() {
    const items = data.items[0];
    const title = items.title;
    const url = items.enclosure.link;
    const description = items.description;
    const feed = [
      {
        url: url,
        title: title,
        description: description
      }
    ];

    return (
      <div className="feed">
        <h1>Newsfeed</h1>
        <div className="columns is-multiline">
          {feed.map(article => (
            <div className="column is-one-third">
              <NewsCard
                article={article}
                title={items.title}
                description={items.description}
              />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Right now its only displaying the first entry of the object (because it has const items = data.items[0]) How can I loop over data.json and display its content in the NewsCard component? I know that each child should have a unique 'key' prop but thats where I'm stuck.

You have a Javascript object. This question isn't related to JSON, which is a way to serialize data into strings. — RemcoGerlich
– RemcoGerlich, Commented Sep 23, 2019 at 12:40
Anyway currently your variable feed is a list of objects, and you know how to loop over it (with feed.map) perfectly well. You should simply do the same thing, but with data.items instead of feed. — RemcoGerlich
– RemcoGerlich, Commented Sep 23, 2019 at 12:41

user9408899 · Accepted Answer · 2019-09-23 13:00:30Z

1

I want to loop over this JSON object to display all the available items and its corresponding title, description and enclosure-link

Then instead of doing this:

const items = data.items[0];

Try this:

const items = data.items;

Then, you can use the map function, like this:

items.map(item => (
  <div className="column is-one-third">
    <NewsCard
      article={item.enclosure.link}
      title={item.title}
      description={item.description}
    />
  </div>
));

answered Sep 23, 2019 at 13:00

user9408899

4,5805 gold badges21 silver badges33 bronze badges

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

Comments

Aditya Bhave · Accepted Answer · 2019-09-23 13:02:09Z

0

You could do something like this.


    class Feed extends Component {
      render() {        
        let newsCards = data.items.map(item => {
            <div className="column is-one-third">
                  <NewsCard
                    article={item}
                    title={item.title}
                    description={item.description}
                  />
                </div>
        });

        return (
          <div className="feed">
            <h1>Newsfeed</h1>
            <div className="columns is-multiline">
              {newsCards}
            </div>
          </div>
        );
      }
    }

answered Sep 23, 2019 at 13:02

Aditya Bhave

1,0281 gold badge6 silver badges10 bronze badges

Comments

Kishan Jaiswal · Accepted Answer · 2019-09-24 07:29:45Z

0

 const feed = data.items
  {feed.map(item => (
        <div className="column is-one-third">
          <NewsCard
            article={item.enclosure.link}
            title={item.title}
            description={item.description}
          />
        </div>
      ))}

try this way

edited Sep 24, 2019 at 7:29

answered Sep 23, 2019 at 12:58

Kishan Jaiswal

6624 silver badges14 bronze badges

Collectives™ on Stack Overflow

How can I loop over a JSON object in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related