Click here to Skip to main content
15,560,542 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a JSON file that has nested arrays but just can't figure it out how to map nested arrays or in other words how to get / show only first or second array.

Example:

My JSON file:

JavaScript
[
        {
            "id": 1,
            "title": "Video 1",
            "video_leght": "00:50:00",
            "date": "20.05.2010",
            "questions": [
                {
                    "id": 1,
                    "question": "Question 1 ",
                    "url": "Link"
                  },
                  {
                    "id": 2,
                    "question": "Question 2",
                    "url": "Link"
                  },
                  {
                    "id": 3,
                    "question": "Question 3",
                    "url": "Link"
                  }         
            ]
        },
        {
            "id": 2,
            "title": "Video 2",
            "video_leght": "01:00:00",
            "date": "14.07.2016",
            "questions":[
                {
                    "id": 1,
                    "question": "Question 1 ",
                    "url": "Link"
                  },
                  {
                    "id": 2,
                    "question": "Question 2",
                    "url": "Link"
                  },
                  {
                    "id": 3,
                    "question": "Question 3",
                    "url": "Link"
                  }        
            ]
        }
    ]

For example, I want to show only the questions from Video 2. So I would have i.e. 3x divs - in each div one question of Video 2.

I'm new to React and JavaScript so please don't mind if this is something simple to solve.

Thanks in advance!

What I have tried:

<div>
        {DataList.map((ListItem, index) => {
          return (
            <div key={index}>
              <h3>{ListItem.id[2].question)}</h3>
            </div>
          );
        })}
      </div>
Posted
Updated 29-Nov-22 11:31am
v3

1 solution

See JavaScript JSON[^] for detials on how to convert it into objects which you can then access directly.
 
Share this answer
 
Comments
Said Durmic 29-Nov-22 4:51am    
Thank you for the information. I looked at it but couldn't figure it out.

I would be very grateful if you could provide me with some examples like I mentioned above. Thanks 😊
Richard MacCutchan 29-Nov-22 6:46am    
Follow the link I gave you above to the W3Schools website. You can learn all you need and even test the sample code there.
Said Durmic 29-Nov-22 16:27pm    
Don't get me wrong, like I said I'm new to all of this programming stuff and telling someone just read that... won't always Help. Most of the time I learn by looking at the code that I need and trying to understand it. Before you even commented there is an Info when answering someone's question:

"Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question."

I tried and unfortunately couldn't do it.


With this code I was able to get these results:

Video 1
Video 2


<div>
        {DataList.map((ListItem, index) => {
          return (
            <div key={index}>
              <h3>{ListItem.title)}</h3>
            </div>
          );
        })}
      </div>




but I can't figure it out how to get only the results from Video 2:

Question 1
Question 2
Question 3

If you don't know the code that can help me out than I appreciate your time.
Richard MacCutchan 29-Nov-22 16:35pm    
As I said, the link I gave you contains good training materials including sample code. If you don't want to make use of it that is entirely your choice.
Said Durmic 1-Dec-22 18:16pm    
There are times when that doesn't help either and that's why I asked my question to get an answer from someone because I just couldn't find exactly what I need online and as a newbie it's not that easy and quick to understand.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900