How do you access all values in JSON array?

Question

The only data I can access right now is the beginning part of the array:

[
    {
        /*start*/
        "username" : "Bob",
        "password":"123456",
        "bio":"Hi",
        /*End*/
        "data":
        [
            {
                "pet" : "dog",
                "age" : "20",
                "city" : "5"
            },
            {
                "pet" : "cat",
                "age" : "18",
                "city" : "7"
            }
        ]
    }
]

I can also access part of the data array, but I am trying to access all of it. For example: {item.data[1].pet}. I tried using a for loop but was unsuccessful with that. I am also using react-native flat list and doing dataSource: responseJSON.data didn't work for me either. I'm sure there has to be a way to access all of the values of petinstead of just one each time, I just don't know how to.

Also since I am a beginner any tips will be gladly appreciated.

EDIT: Attempts at trying to loop from outside the JSX:

 var itemList = [];

for (var i = 0; i < responseJSON[0].data.length; i++) { itemList.push(<Text> {responseJson[0].data[i].pet}</Text>); }

I put that out of the render() Then I take itemList and stick it here:

<FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) => <View>

          {itemList}
          </View>
             }

          keyExtractor={(item, index) => index}

     />

Now it's not understanding that itemList is a variable. I'm getting a syntax error.

EDIT 2: Thanks to everyone the only thing I need help with is putting a variable inside of componentDidMountin React Native.

What is wrong with looping through data? I hope you know arrays start with 0 and not 1, right? — Andrew
– Andrew, Commented Feb 12, 2018 at 14:49
Can you post the code you are using to try to access this data? — Andrew
– Andrew, Commented Feb 12, 2018 at 15:25
Your renderItem function is trying to dump the itemList inside a View. You probably only want to render one item per renderItem. See if this helps you along renderItem={(item) => <View><Text>{item.pet}</Text></View>, Also, if the list will be changing you should read up on extraData FlatList prop. — Travis White
– Travis White, Commented Feb 12, 2018 at 16:09
@TravisWhite I did this for the data about data in the array and it works. I am trying to dump data's value like pets all in the JSX. — Laney Williams
– Laney Williams, Commented Feb 12, 2018 at 16:44
@LaneyWilliams if you know which properties the data may contain, just hardcode everything? {item.pet} {item.age} {item.city}? If you don't know which properties the data may contain, you can check this out stackoverflow.com/questions/8312459/… — Travis White
– Travis White, Commented Feb 12, 2018 at 16:51

Andrew · Accepted Answer · 2018-02-13 00:09:09Z

1

I have no experience with React but from what I've found it seems it should be done this way:

const responseJson = [
    {
        /*start*/
        "username" : "Bob",
        "password":"123456",
        "bio":"Hi",
        /*End*/
        "data":
        [
            {
                "pet" : "dog",
                "age" : "20",
                "city" : "5"
            },
            {
                "pet" : "cat",
                "age" : "18",
                "city" : "7"
            }
        ]
    }
];


const listItems = responseJson[0].data.map((details) =>
  <li>{details.pet}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

The output I get is:

dog

cat

answered Feb 13, 2018 at 0:09

Andrew

7,9802 gold badges38 silver badges48 bronze badges

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

1 Comment

Laney Williams Over a year ago

Yes this definitely seems like it should work, but in React Native, the const is only allowed in the render(){}. I could research further more about that. @Andrew

Carlos Jafet Neto · Accepted Answer · 2018-02-12 15:16:49Z

1

You can do it like this in javascript:

var json = {"data":[{"pet":"dog","age":"20","city":"5"},{"pet":"cat","age":"18","city":"7"}]};


for (var i = 0; i < json.data.length; i++) {
  var object = json.data[i];
  console.log(object);
  console.log(object.pet, object.age, object.city);
}

answered Feb 12, 2018 at 15:16

Carlos Jafet Neto

9227 silver badges12 bronze badges

1 Comment

Laney Williams Over a year ago

The data is in the database

Léo R. · Accepted Answer · 2018-02-12 14:49:37Z

0

Try this loop :

for (var i = 0; i < responseJSON[0].data.length; i++) { 
    alert(responseJSON[0].data[i].pet);
}

Working example here :

https://plnkr.co/edit/c1sZYKrBWHFJOKwHEMbU?p=preview

answered Feb 12, 2018 at 14:49

Léo R.

2,7161 gold badge13 silver badges23 bronze badges

2 Comments

Laney Williams Over a year ago

Ok this is great, but I tried putting this into JSX.

var itemList = [];     for (var i = 0; i < responseJSON[0].data.length; i++) {         itemList.push(<Text> {responseJson[0].data[i].pet}</Text>);     }

I keep getting a syntax error on var itemList= []; @Leo R.

Andrew Over a year ago

@LaneyWilliams, add your attempts in your question, here they are much harder to understand and have much less visibility.

Harikrishnan S · Accepted Answer · 2018-02-12 15:16:53Z

-1

Why don't you convert all the data in the responseJson to objects using Lodash Library and then take the data object from it and assign it to a variable and then convert it back to an array. And after that you change the data source to that array you get

See the Documentation of Lodash here

answered Feb 12, 2018 at 15:16

Harikrishnan S

1241 gold badge2 silver badges13 bronze badges

1 Comment

Andrew Over a year ago

I didn't downvote, but why would he need such library?

Collectives™ on Stack Overflow

How do you access all values in JSON array?

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related