How to render an array within a JSON object in react-native

Question

I am developing an app with react-native , using RESTfull api with laravel backend , I have an object that has arrays in it . I am using it to create user's profile page . but I don't know how to render those arrays. here is my api response:

{
  meta: {
    code: 200,
    message: 'Success',
    errors: []
  },
  data: {
    users: [
      {
        personal_information: {
          full_name: 'hesam sameni',
          avatar: 'https://aaa/file/image/hesamsameni.jpeg',
          rate: '0.0',
          phone: [],
          location: {
            name: 'something',
            lat: 00,
            long: 00,
            address: 'something',
            distance: 00
          },
          about: {
            quote: 'something',
            bio: 'something'
          },
          topics: {
            a: 'a',
            b: 'b',
            c: 'c',
            d: 'd'
          },
          stats: {
            a: 10,
            b: 0,
            c: 0,
            d: 0,
            e: 0
          },
          experiences: [
            {
              title: 'something',
              organization: 'something',
              start: 'something',
              end: 'something'
            }
          ],
          educations: [
            {
              title: 'something1',
              university: 'something1',
              major: 'something1',
              start: 'something1',
              end: 'something1'
            },
            {
              title: 'something2',
              university: 'something2',
              major: 'something2',
              start: 'something2',
              end: 'something2'
            }
          ]
        }
      }
    ]
  }
};

For example how can I show educations in user's profile?

here is the render method ( I already got data from api and stored in state {this.state.dataSource}

render method:

render() {
  return (
    <View>
      <FlatList
        data={this.state.dataSource}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>Name: {item.personal_information.full_name}</Text>
            <Text>Rate: {item.personal_information.Rate}</Text>
            <Text>Educations:</Text>
            // Here I need to display all of user's educations
          </View>
        )}
      />
    </View>
  );
}

I am not sure if I had to use flatlist since it is only data for 1 specific user , but I didn't know how to render data in other way than flatlist .

Yes I can render items which are not in array , e.g I can render full_name and rate but I want to render both items in education array — hesam sameni
– hesam sameni, Commented Apr 10, 2019 at 6:33

Tanveerbyn · Accepted Answer · 2019-04-10 06:40:34Z

2

try this it will help you achive what you want. if not tell me..

     <FlatList
  data={this.state.itemArray}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) =>{
    console.warn(item.data.users[0].personal_information.educations)
  return(<FlatList
data={item.data.users[0].personal_information.educations}
keyExtractor={(item, index) => "D"+index.toString()}
renderItem={({item}) =>{
console.warn(item)
}
}/>)
  }
}/>

if u want to get something from personal_information try this example : console.warn(item.data.users[0].personal_information.full_name)

edited Apr 10, 2019 at 6:40

answered Apr 10, 2019 at 6:21

Tanveerbyn

7841 gold badge11 silver badges26 bronze badges

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

3 Comments

hesam sameni Over a year ago

I can get the full_name and other things that are not array , but I want to render both items in educations

hesam sameni Over a year ago

You suggest to use flatlist inside the flatlist? I'll give it a try

Tanveerbyn Over a year ago

u can user even facebook.github.io/react-native/docs/0.47/sectionlist section list for this also

Hardik Virani · Accepted Answer · 2019-04-10 06:20:42Z

So .map itself only offers one value you care about... That said, there are a few ways of tackling this:

// instantiation
this.state.dataSource

//Using `.map` directlly
this.state.dataSource.map((obj, index)=> {
    console.log(obj);
    return(
        <View />
    )
});

// what's built into Map for you
this.state.dataSource.forEach( (val, key) => console.log(key, val) ); 

// what Array can do for you
Array.from( this.state.dataSource ).map(([key, value]) => ({ key, value }));

// less awesome iteration
let entries = this.state.dataSource.entries( );
for (let entry of entries) {
  console.log(entry);
}

Note, I'm using a lot of new stuff in that second example... ...Array.from takes any iterable (any time you'd use [].slice.call( ), plus Sets and Maps) and turns it into an array... ...Maps, when coerced into an array, turn into an array of arrays, where el[0] === key && el[1] === value; (basically, in the same format that I prefilled my example Map with, above).

I'm using destructuring of the array in the argument position of the lambda, to assign those array spots to values, before returning an object for each el.

If you're using Babel, in production, you're going to need to use Babel's browser polyfill (which includes "core-js" and Facebook's "regenerator"). I'm quite certain it contains Array.from.

lovepreet singh · Accepted Answer · 2019-04-10 06:52:32Z

0

render(){
     console.log(this.state.data.users[0].personal_information.educations,'cdscdscdcds')
    return(
        <div>

            {this.state.data.users.map((value)=>{
                console.log(value,'cd')
            })}
        </div>

answered Apr 10, 2019 at 6:52

lovepreet singh

1184 bronze badges

Collectives™ on Stack Overflow

How to render an array within a JSON object in react-native

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related