Javascript / React list titles from object

Question

I have some data in a react project and I need to display the titles in a list.

Here is the data:

   const data = [
    {
        "things":[
            {
                "id":"1",
                "subdata":{
                    "date":{
                        "exp":"2018-17-23"
                    },
                    "titles":[
                        {
                            "title":"title1"
                        },
                        {
                            "title":"title2"
                        }
                    ]
                }
            }
        ]
    }
 ]

How can I list the title values in a

{ title value here } loop?

Do you want to loop over all "titles" in multiple "things"? Also, if you put your real data structure in your question I think it'll be easier to answer. — DontFeedTheHypeMachine
– DontFeedTheHypeMachine, Commented Oct 23, 2018 at 21:44
In this case I just want to loop titles and display to 2 titles — user10044012
– user10044012, Commented Oct 23, 2018 at 21:45

Sergii Shvager · Accepted Answer · 2018-10-23 21:50:19Z

1

To iterate through titles of just first thing and log it:

data[0].things[0].subdata.titles.forEach(obj => {
  console.log(obj.title)
})

edited Oct 23, 2018 at 21:50

answered Oct 23, 2018 at 21:45

Sergii Shvager

1,2669 silver badges15 bronze badges

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

Comments

Asaf Aviv · Accepted Answer · 2018-10-23 21:48:28Z

0

data[0].things.map(({ subdata }) => subdata.titles.map(({ title }) => console.log(title)))

answered Oct 23, 2018 at 21:48

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

2 Comments

Ross Sheppard Over a year ago

Given the context of the question, use a .forEach instead of a .map. This is also less performant with the use of two .map calls. :|

Asaf Aviv Over a year ago

We cant really know if things is array with only one object or multiple objects. Also he wants to use it with React where forEach dosent return anything causing nothing to render.

Ross Sheppard · Accepted Answer · 2018-10-23 21:51:16Z

0

data[0].things[0].subdata.titles.forEach(obj => console.log(obj.title));

answered Oct 23, 2018 at 21:51

Ross Sheppard

8701 gold badge6 silver badges14 bronze badges

Comments

colefner · Accepted Answer · 2018-10-23 21:56:07Z

0

To get the titles in a new array, you could use .map

const allTitles = data[0].things[0].subdata.titles.map(title => title.title);

console.log(allTitles);

// outputs ["title1", "title2"]

answered Oct 23, 2018 at 21:56

colefner

1,8811 gold badge17 silver badges12 bronze badges

Comments

philip_nunoo · Accepted Answer · 2018-10-23 22:45:59Z

Instead of pointing to individual indexes within the array, @kevin Porche, I think you should have a function automatically know the indexes and build your titles for you.

Here is a code sample that would build your titles even when you have a lot of items within data eg:

const data = [{things: []}, {things: []} ];

const data = [
    {
        "things": [
            {
                "id": "1",
                "subdata": {
                    "date": {
                        "exp": "2018-17-23"
                    },
                    "titles": [
                        {
                            "title": "title1"
                        },
                        {
                            "title": "title2"
                        }
                    ]
                }
            }
        ]
    }
]

const yourTitles = [];
data.map(({ things }) => {
    things.map(({ subdata: { titles } }) => {           
        titles.map(({ title }) => {
            yourTitles.push(title);
        });        
    })
});

console.log(yourTitles);

Collectives™ on Stack Overflow

Javascript / React list titles from object

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related