How to display JSON data in react-native without a list?

Question

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?

sd_dewasurendra · Accepted Answer · 2019-11-13 13:33:52Z

2

First, convert your JSON to a javascript array.

var data = JSON.parse(jsonObj);

For rendering your data you can simply use react-native Flatlist Inside your ,

import {FlatList} from 'react-native'; // import FlatList from react native first

<View>
      <FlatList
        data={data[0].pallets[0].items}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
      />
</View>

renderItem(item){
    //do your stuff here
    //you can render one by one here
}

answered Nov 13, 2019 at 13:33

sd_dewasurendra

3936 silver badges23 bronze badges

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

Comments

akhtarvahid · Accepted Answer · 2019-11-13 13:29:15Z

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;

Collectives™ on Stack Overflow

How to display JSON data in react-native without a list?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related