0

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.

9
  • theres no this.props.route.map shown on the code given. Commented Nov 10, 2017 at 5:09
  • I am sorry, I copied the wrong sentence. It should be this.props.houses.map Commented Nov 10, 2017 at 6:00
  • const houseInfo = this.props.houses.map(function (item) can you console log item. I think you should be using item.name, etc. also you need a key on the view, but let's see first if what kind of data you are getting. If you are not getting any data, check function mapStateToProps({ houses }) and change it for function mapStateToProps(houses) Commented Nov 10, 2017 at 6:41
  • @Mike that's another problem too. I am using Expo to develop this app and for some reason, Expo did not show the console log even I restarted the project. Commented Nov 10, 2017 at 6:45
  • yes, you can check the logs, follow this link docs.expo.io/versions/latest/guides/logging.html Commented Nov 10, 2017 at 6:48

1 Answer 1

2

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>
        );
    });
Sign up to request clarification or add additional context in comments.

1 Comment

thank you. your 1st solution worked for me with a few changed from my side.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.