Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to map json data with array in react native

See original GitHub issue

I have array like this in react native

` { “id”: 17421, “title”: “LEGO Power Functions 88002 Train Motor”,

    "items": [
        {
            "id": 17421,
            "product_id": "17421",
            "item_title": "",
            "item_description": "",
            "sku": "88002",
          
            "taxonomies": [
                {
                    "id": 1186,
                    "cat_id": null,
                    "name": "Black",
                    "excerpt": null,
                    "pivot": {
                        "item_id": "17421",
                        "taxonomy_id": "1186"
                    }
                },
                {
                    "id": 2,
                    "cat_id": null,
                    "name": "Brand New",
                  
                    "data": "",
                    "store_data": "",
                    "excerpt": null,
                    "pivot": {
                        "item_id": "17421",
                        "taxonomy_id": "2"
                    }
                }
            ],
            "medias": []
        },
        {
            "id": 69882,
            "product_id": "17421",
            "item_title": "",
         
            "trigger_inventory": "",
            "taxonomies": [],
            "medias": []
        },
        {
            "id": 69883,
            "product_id": "17421",
            "item_title": "",
            "item_description": "",

            "medias": []
        }
    ],
    "medias": []
},`

Here Source code `import React, { Component } from ‘react’; import { Text } from ‘react-native’; import { Content, Card, CardItem, Body } from ‘native-base’; import AppBodyData from ‘./AppBodyData’;

export default class AppBody extends Component{ constructor(){ this.state = { data: [] } }

ambilData(){
	console.log('req list product');
	fetch("http")
	.then((response) => response.json())
	.then((responseJson) => {
		console.log(responseJson);
		this.setState( { data: responseJson });

	})
	.catch((error) => {
		console.error(error);
	});
}

componentDidMount() {
	this.ambilData();
}

render(){
	return (
		<AppBodyData data={this.state.data} />
	);
}

`export default class AppBodyData extends Component {

constructor(props){
    super(props);
    this.toProductDetail = this.toProductDetail.bind(this);
    // console.log('app body data constructor');
}

toProductDetail(dataku){
    // console.log('product clicked');
    console.log(dataku);
    Actions.DetailProduct({product: dataku});
}

render() {
    var ini = this;
    let isi = this.props.data.map(function (DataPopitoi, index) {
        return (
            <Card key={index}>
                <CardItem cardBody button={true} onPress={() => {ini.toProductDetail(DataPopitoi)}} >
                    <Image source={{ uri: 'http://lab.hellomorra.com/popitoi-warehouse/images/main.jpg' }} style={{ height: 200, width: null, flex: 1 }} />
                </CardItem>

                <CardItem>
                    <Text>
                        Item name
                   </Text>
                    <Body>
                        <Text>
                            SKU : {DataPopitoi.items[0].sku}
                        </Text>
                    </Body>
                </CardItem>


                <CardItem>

                    <Left>
                        <CheckBox checked={true} />
                        <Body>
                            <Text>Brand New</Text>
                        </Body>


                    </Left>
                    <Right>
                        <Text>{DataPopitoi.items[0].stock_available}</Text>
                    </Right>
                </CardItem>

                <CardItem>
                    <Left>
                        <CheckBox checked={false} />
                        <Body>
                            <Text>Demaged</Text>
                        </Body>

                    </Left>
                </CardItem>

            </Card>
        )
    });

    return (
        <Content>
            {isi}
        </Content>
    );

}

} `

How to read items.sku on array josn ? – | –