Как визуализировать массив в объекте JSON в реагирующем

Question

Я занимаюсь разработкой приложения с реактивным родом, используя RESTfull api с внутренним интерфейсом laravel, у меня есть объект с массивами. Я использую его для создания страницы профиля пользователя. но я не знаю, как визуализировать эти массивы. вот мой ответ API:

{
  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'
            }
          ]
        }
      }
    ]
  }
};

Например, как я могу показать образование в профиле пользователя?

вот метод рендеринга (я уже получил данные из API и сохранил их в состоянии {this.state.dataSource}

метод визуализации:

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>
  );
}

Я не уверен, что мне пришлось использовать плоский список, так как это данные только для одного конкретного пользователя, но я не знал, как отобразить данные иначе, чем плоский список.

Answer 1

попробуйте это поможет вам достичь того, что вы хотите. если не скажи мне ..

     <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)
}
}/>)
  }
}/>

если вы хотите получить что-то из personal_information попробуйте этот пример: console.warn(item.data.users[0].personal_information.full_name)

Answer 2

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>

Answer 3

Итак, .map сам по себе предлагает только одно значение, о котором вы заботитесь ... Тем не менее, есть несколько способов решения этой проблемы:

// 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);
}

Обратите внимание, я использую много новогово втором примере ... ...Array .from берет любую итерацию (в любое время, когда вы используете [].slice.call( ), плюс наборы и карты) и превращает ее в массив ... ... Maps, когда приводится в массив, превратить в массив массивов, где el[0] === key && el[1] === value;(в основном в том же формате, в котором я предварительно заполнил мой пример Map, выше).

Я использую деструктуризацию массива в позиции аргумента лямбды, чтобы присвоить этим точкам массива значения перед возвратомобъект для каждого эл.

Если вы используете Babel, на производстве вам нужно будет использовать браузер Babel Polyfill (который включает в себя «core-js» и «регенератор» Facebook).Я совершенно уверен, что он содержит Array.from.