How to display a list of array in a object array in a flatlist with react native?

Question

how to show a list of array data in an object of another array in a flatlist with react native?

this is the list of data below i would like to display in the flatlist

const data = [
  {
    students: [
      {
        name: 'crystal',
        city: 'town',
        number: 1,
      },
      {
        name: 'barbra',
        city: 'street',
        number: 2,
      },
    ],
  },
];

i tried this below but nothing is showing

  <FlatList
        data={data.students}
        renderItem={({ item }) => {
          return (
            <View>
              <View>
                <Text style={{ fontSize: 16 }}>{item.name}</Text>
                <Text style={{ fontSize: 16 }}>{item.city}</Text>
                <Text style={{ fontSize: 16 }}>{item.number}</Text>
              </View>
            </View>
          );
        }}
      />

data looks like an array with a single object inside. Try data[0].students. Or perhaps get rid of the outer array if it's not needed. — Kraylog
– Kraylog, Commented Oct 24, 2019 at 4:48
@manny check this stackoverflow.com/a/58534330/6544460 you are using array of object. — akhtarvahid
– akhtarvahid, Commented Oct 24, 2019 at 4:52

akhtarvahid · Accepted Answer · 2019-10-24 04:51:06Z

1

const data = [
  {
    students: [
      {
        name: "crystal",
        city: "town",
        number: 1
      },
      {
        name: "barbra",
        city: "street",
        number: 2
      }
    ]
  }
];
class App extends Component {
  render() {
    console.log(data[0].students)
    return (
      <FlatList
        data={data[0].students}
        renderItem={({ item }) => {
          return (
            <View>
              <View>
                <Text style={{ fontSize: 16 }}>{item.name}{console.log(item)}</Text>
                <Text style={{ fontSize: 16 }}>{item.city}</Text>
                <Text style={{ fontSize: 16 }}>{item.number}</Text>
              </View>
            </View>
          );
        }}
      />
    );
  }
}

answered Oct 24, 2019 at 4:51

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

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

4 Comments

manny Over a year ago

what if the data was like this ``` const data = [ { class: "grade", students: [ { name: "crystal", city: "town", number: 1 }, { name: "barbra", city: "street", number: 2 } ] } ];;``` how would i get to show the class field with student field in the flatlist at the same time @VahidAkhtar @Kraylog

akhtarvahid Over a year ago

@manny i think both json are same. did you change something in json?

manny Over a year ago

i added a class field @VahidAkhtar

akhtarvahid Over a year ago

@manny you can't loop that because that's outside of array so you can access like this data[0].class.

Collectives™ on Stack Overflow

How to display a list of array in a object array in a flatlist with react native?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related