Mapping specific nested arrays - react

Question

0.00/5 (No votes)

See more:

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 28-Nov-22 15:01pm

Said Durmic

Updated 29-Nov-22 10:31am

v3

Add a Solution

1 solution

Add a Solution

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

Richard MacCutchan · Answer 1 · 2022-11-28T21:46:00

Solution 1

See JavaScript JSON[^] for detials on how to convert it into objects which you can then access directly.

Posted 28-Nov-22 21:46pm

Richard MacCutchan

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 😊

[no name] 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.

[no name] 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.

Mapping specific nested arrays - react

1 solution

Solution 1

Add your solution here

Preview 0

Mapping specific nested arrays - react

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us