JSON in React Native FlatList

Question

I want parse Woocomerce API response in React Native.

Can any one tell how to parse id, name, categories array and images array in React Native FlatList from JSON response mention below.

{
   "id":794,
   "name":"Premium Quality",
   "catalog_visibility":"visible",
   "price":"21.99",
   "regular_price":"21.99",
   "sale_price":"",
   "categories":[
      {
         "id":9,
         "name":"Clothing",
         "slug":"clothing"
      },
      {
         "id":14,
         "name":"T-shirts",
         "slug":"t-shirts"
      }
   ],
   "tags":[

   ],
   "images":[
      {
         "id":792,
         "date_created":"2017-03-23T14:01:13",
         "date_created_gmt":"2017-03-23T20:01:13",
         "date_modified":"2017-03-23T14:01:13",
         "date_modified_gmt":"2017-03-23T20:01:13",
         "src":"https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
         "name":"",
         "alt":""
      },
      {
         "id":793,
         "date_created":"2017-03-23T14:01:14",
         "date_created_gmt":"2017-03-23T20:01:14",
         "date_modified":"2017-03-23T14:01:14",
         "date_modified_gmt":"2017-03-23T20:01:14",
         "src":"https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
         "name":"",
         "alt":""
      }
   ]
}

Answer 1

You can store the JSON inside a var (eg. myJSON), and do JSON.parse in FlatList prop.

This is the simplest way. After achieve that, you can improve performance using useEffect and useState to avoid unnecessary re-render.

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

// JSON.stringify only used here to simulate a true JSON
const myJson = JSON.stringify([
  {
    "id": 794,
    "name": "Premium Quality",
    "catalog_visibility": "visible",
    "price": "21.99",
    "regular_price": "21.99",
    "sale_price": "",
    "categories": [
      {
        "id": 9,
        "name": "Clothing",
        "slug": "clothing"
      },
      {
        "id": 14,
        "name": "T-shirts",
        "slug": "t-shirts"
      }
    ],
    "tags": [],
    "images": [
      {
        "id": 792,
        "date_created": "2017-03-23T14:01:13",
        "date_created_gmt": "2017-03-23T20:01:13",
        "date_modified": "2017-03-23T14:01:13",
        "date_modified_gmt": "2017-03-23T20:01:13",
        "src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
        "name": "",
        "alt": ""
      },
      {
        "id": 793,
        "date_created": "2017-03-23T14:01:14",
        "date_created_gmt": "2017-03-23T20:01:14",
        "date_modified": "2017-03-23T14:01:14",
        "date_modified_gmt": "2017-03-23T20:01:14",
        "src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
        "name": "",
        "alt": ""
      }
    ]
  }
]);

function Item({ item }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{item.name} - {item.price}</Text>

      <View style={{ flex: 1 }}>
        <Text>Categories: </Text>

        {item.categories.map((category) => {
          return (
            <Text>{category.name}</Text>
          )
        })}
      </View>

      <View style={{ flex: 1 }}>
        <Text>Images: </Text>

        {item.images.map((image) => {
          return (
            <Text>Image src: {image.src}</Text>
          )
        })}
      </View>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={JSON.parse(myJson)}
        renderItem={Item}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});