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":""
}
]
}
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,
},
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.