Ad
How To Display JSON Data In React-native Without A List?
I comprehend the development of an application on a react native, I encountered a problem with displaying data.
From the server side comes json
[
{
"cell_name": "112185",
"id": "000000005",
"pallets": [
{
"id": "000000016",
"items": [
{
"product_info": {
"name": "first product name",
"unit_info": {
"name": "box"
},
},
"count": 100
},
{
"product_info": {
"name": "second product name",
"unit_info": {
"name": "box"
},
},
"count": 23
},
{
"product_info": {
"name": "third product name",
"unit_info": {
"name": "box"
},
},
"count": 15
}
]
}
]
}
]
I need to display information on the screen.
I tried to display in this way, but failed - nothing is displayed.
return (
<PageView
...
>
<View>
{ cells.map((cell, cell_i) => {
const cell_name = cell.name == '' ? 'Not cell' : cell.name;
return (<Text key={cell_i}>Cell {cell_name}</Text> &&
( for (i in cell.pallets) {
const pallet = cell.pallets[i];
const pallet_name = pallet.id == '' ? 'Not pallet' : pallet.id;
return (<Text h2 key={cell_i+'.'+pallet_i}>Pallet {pallet_name}</Text> &&
( for(j in pallet.items) {
const item = pallet.items[j];
return (<Text key={cell_i+'.'+pallet_i+'.'+item_i}>{item.product_info.name} {item.count} {item.product_info.unit_info.name}</Text>);
})
)
})
)
})}
</View>
</PageView>
)
Perhaps someone will tell you how to display such a structure correctly?
Ad
Answer
import React, { Component } from "react";
import {StyleSheet, Text, View } from "react-native";
let data = [
{
cell_name: "112185",
id: "000000005",
pallets: [
{
id: "000000016",
items: [
{
product_info: {
name: "first product name",
unit_info: {
name: "box"
}
},
count: 100
},
{
product_info: {
name: "second product name",
unit_info: {
name: "box"
}
},
count: 23
},
{
product_info: {
name: "third product name",
unit_info: {
name: "box"
}
},
count: 15
}
]
}
]
}
];
let items = data[0].pallets[0].items;
class App extends Component {
render() {
console.log(items);
return (
<View>
{items.map(item => (
<View key={item.product_info.name}>
<Text style={styles.one}>{item.product_info.name}</Text>
<Text style={styles.two}>{item.product_info.unit_info.name}</Text>
</View>
))}
</View>
);
}
}
const styles = StyleSheet.create({
one: {
color: 'red'
},
two: {
color: 'blue'
}
})
export default App;
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad