How to map array in nested JSON API using React Native + React Redux?

Question

Possible duplication of this

Firstly, I am sorry if this question looks dumb but I really need some help here. My question is I can say partly same as the question link I pasted above.

I have a JSON response like this

{
"timestamp": 1510222037,
"verb": "GET",
"object": "route",
    "data": {
        "houseGeoJSON": {
            "type": "FeatureCollection",
            "features": [
                {
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    101.60808563232422,
                                    3.1660120732795227
                                ],
                                [
                                    101.60975933074951,
                                    3.1649818312001101
                                ],
                                [
                                    101.6114330291748,
                                    3.164983676545967
                                ],
                                [
                                    101.6114330291748,
                                    3.166054929292111
                                ],
                                [
                                    101.60933017730713,
                                    3.1668283292030202
                                ],
                                [
                                    101.60847187042236,
                                    3.1666976705346896
                                ],
                                [
                                    101.60808563232422,
                                    3.1660120732795227
                                ]
                            ]
                        ]
                    },
                    "type": "Feature",
                    "properties": {}
                }
            ]
     },
        "description": "Property",
        "id": 1,
        "houseType": "Apartment",
        "name": "First House"
    }
}

Now I am trying to iterate over this JSON response and render the value on a page in my app.

Below is the code for the page.

import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { Card, Button } from 'react-native-elements';
import { connect } from 'react-redux';

class RouteScreen extends Component {

    onButtonPressClose = () => {
        this.props.navigation.navigate('Home');
    }

   render() {
        const houseInfo = this.props.houses.map(function (item) {
            return (
                <View>
                    <Text>Name: {this.props.houses.name}</Text>
                    <Text>Description: {this.props.houses.description}</Text>
                    <Text>ID: {this.props.houses.id}</Text>
                    <Text>Coordinates: {item.houseGeoJSON.features.geometry.coordinates}</Text>
                </View>
            );
        });
        return (
            <ScrollView>
                <Card>
                    <View>
                        { houseInfo }
                    </View>
                </Card>

                <Card>
                    <Button
                        small
                        title="Back"
                        backgroundColor="#94b8b8"
                        onPress={this.onButtonPressClose}
                    />
                </Card>

            </ScrollView>
        );
    }
}

function mapStateToProps({ houses }) {
    return { houses: houses.data };
}

export default connect(mapStateToProps)(RouteScreen);

• adapted from the link I pasted.

This gave me error saying TypeError: this.props.houses.map is not a function

I want to ask am I in the right track here? If not, please advice if anything I have been missing from this code.

Thank you for your help and suggestion. i really appreciated it.

Answer 1

First problem is that this.props.houses as I can see is an object and not an array. You can only use map on an array.

Second problem, item.houseGeoJSON.features is an array not an object.

So I have 2 solutions for you,

If you want to show all the coordinates with a single house name you can do like below,

   render() {
        const houseInfo = this.props.houses.map(function (item) {
            return (
              <Text>
                 {`Coordinates: ${item[0]}-${item[1]}`}
              </Text>
            );
        }.bind(this));
        return (
            <ScrollView>
                <Card>
                    <View>
                      <Text>Name: {this.props.houses.name}</Text>
                      <Text>Description: {this.props.houses.description}</Text>
                      <Text>ID: {this.props.houses.id}</Text>
                      { houseInfo }
                    </View>
                </Card>

                <Card>
                    <Button
                        small
                        title="Back"
                        backgroundColor="#94b8b8"
                        onPress={this.onButtonPressClose}
                    />
                </Card>

            </ScrollView>
        );
    }

If you want to see hose name for each coordinate then you can do like below;

    const houseInfo = this.props.houseshouseGeoJSON.features[0].geometry.coordinates.map((item) => {
        return (
            <View>
                <Text>Name: {this.props.houses.name}</Text>
                <Text>Description: {this.props.houses.description}</Text>
                <Text>ID: {this.props.houses.id}</Text>
                <Text>{`Coordinates: ${item.[0]}-${item[1]}`}</Text>
            </View>
        );
    });