1

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.

Laney Williams
  • 573
  • 3
  • 13
  • 34
  • 1
    What is wrong with looping through `data`? I hope you know arrays start with 0 and not 1, right? – Andrew Feb 12 '18 at 14:49
  • Can you post the code you are using to try to access this data? – Andrew Feb 12 '18 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) => {item.pet}`, Also, if the list will be changing you should read up on `extraData` FlatList prop. – Travis White Feb 12 '18 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 Feb 12 '18 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 https://stackoverflow.com/questions/8312459/iterate-through-object-properties – Travis White Feb 12 '18 at 16:51
  • @TravisWhite I know how to do it: `{item.data[0].pets}` I just don't know how to display all of the `pets` at once. – Laney Williams Feb 12 '18 at 16:59
  • Are you using ASP.NET MVC? Where exactly are you trying to place the pet names? With a for loop like in your first code you access all the pets, which is what you asked in the first place. – Andrew Feb 12 '18 at 17:52
  • @Andrew No, I'm using php. The data is in mysql database and I'm retrieving them and send them to a react native app. I can't use the loop in the JSX – Laney Williams Feb 12 '18 at 19:41
  • Don't you need to use `.map` to render a list of items? https://reactjs.org/docs/lists-and-keys.html – Andrew Feb 12 '18 at 21:53
  • @Andrew Yes, I've done some research about the whole thing and `.map` seems like the way to go. I just need some help figuring how to actually do it. – Laney Williams Feb 12 '18 at 22:57
  • @LaneyWilliams, I just posted an answer. Let me know if that helped. – Andrew Feb 13 '18 at 00:09

4 Answers4

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);
}
Carlos Jafet Neto
  • 871
  • 7
  • 11
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
Andrew
  • 7,602
  • 2
  • 34
  • 42
  • 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 – Laney Williams Feb 13 '18 at 00:24
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

Léo R.
  • 2,620
  • 1
  • 10
  • 22
  • 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( {responseJson[0].data[i].pet}); }` I keep getting a syntax error on `var itemList= [];` @Leo R. – Laney Williams Feb 12 '18 at 15:02
  • @LaneyWilliams, add your attempts in your question, here they are much harder to understand and have much less visibility. – Andrew Feb 12 '18 at 15:26
-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

Harikrishnan S
  • 124
  • 2
  • 13