0

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?

4
  • 2
    What exactly is your question? How to do a loop? Commented Oct 23, 2018 at 21:42
  • Yes please to get the titles data Commented Oct 23, 2018 at 21:43
  • 1
    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. Commented Oct 23, 2018 at 21:44
  • In this case I just want to loop titles and display to 2 titles Commented Oct 23, 2018 at 21:45

5 Answers 5

1

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

data[0].things[0].subdata.titles.forEach(obj => {
  console.log(obj.title)
})
Sign up to request clarification or add additional context in comments.

Comments

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

2 Comments

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. :|
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.
0
data[0].things[0].subdata.titles.forEach(obj => console.log(obj.title));

Comments

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"]

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.