Как отобразить массив внутри объекта JSON в react-native
Я разрабатываю приложение с помощью react-native, используя API RESTfull с бэкэндом 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>
);
}Я не уверен, что мне пришлось использовать плоский список, поскольку это данные только для одного конкретного пользователя, но я не знал, как отображать данные иначе, чем плоский список.
Да, я могу отображать элементы, которых нет в массиве, например, я могу отображать полное имя и рейтинг, но я хочу отображать оба элемента в массиве образования.
Ответы 3
Так что .map сам по себе предлагает только одно значение, которое вас волнует... Тем не менее, есть несколько способов решить эту проблему:
// instantiation
this.state.dataSource
//Using `.map` directlly
this.state.dataSource.map((obj, index)=> {
console.info(obj);
return(
<View />
)
});
// what's built into Map for you
this.state.dataSource.forEach( (val, key) => console.info(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.info(entry);
}
Обратите внимание, во втором примере я использую много нового... ...Array.from берет любой итерируемый объект (в любой момент, когда вы используете [].slice.call( ), плюс наборы и карты) и превращает его в массив... ... Карты при принуждении к массиву превращаются в массив массивов, где el[0] === key && el[1] === value; (в основном, в том же формате, в котором я предварительно заполнил свой пример карты выше).
Я использую деструктурирование массива в позиции аргумента лямбды, чтобы присвоить эти точки массива значениям, прежде чем возвращать объект для каждого el.
Если вы используете Babel в продакшене, вам нужно будет использовать полифилл браузера Babel (который включает в себя «core-js» и «regenerator» Facebook).
Я совершенно уверен, что он содержит Array.from.
попробуйте это, это поможет вам достичь того, чего вы хотите. если не подскажите..
<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)
}
}/>)
}
}/>
если вы хотите получить что-то из личной информации
попробуйте этот пример: console.warn(item.data.users[0].personal_information.full_name)
Я могу получить full_name и другие вещи, которые не являются массивом, но я хочу отобразить оба элемента в образовании.
Вы предлагаете использовать плоский список внутри списка? я попробую
вы можете использовать даже список разделов facebook.github.io/react-native/docs/0.47/sectionlist для этого также
render(){
console.info(this.state.data.users[0].personal_information.educations,'cdscdscdcds')
return(
<div>
{this.state.data.users.map((value)=>{
console.info(value,'cd')
})}
</div>
вы использовали
this.setStateдля обновления данных в состоянии?