如何获取json嵌套对象?

时间:2016-09-24 12:47:25

标签: json react-native

我是React Native的新手,想要从json获取嵌套对象。这是我的代码。我可以获得成功的data.phone,但如果我尝试获取data.name.title等,总会得到这个。

undefined不是对象

这是我的代码。

class Dictionary extends Component {
    // Initialize the hardcoded data
    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
            ])
        };

        fetch('http://api.randomuser.me/?results=50')
            .then((response) => response.json())
            .then((responseJson) => {
                //return responseJson.movies;
                console.log( responseJson.results );
                this.setState({
                    dataSource: ds.cloneWithRows(responseJson.results),
                    loaded:false,
                })

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

    render() {
        return (
            <View
                style={styles.container}>

                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(data) =>
                        <View>
                            <Text>
                                {data.phone}
                            </Text>
                                <Text>
            {data.name.title}
        </Text>   
                        </View>
                    }
                    renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
                />
            </View>
        );
    }
}

我怎样才能获得name.title? 谢谢 这是来自randomuser.me的json数据

{"results":[{"gender":"female","name":{"title":"miss","first":"abby","last":"perkins"},"location":{"street":"9542 highfield road","city":"ely","state":"herefordshire","postcode":"J9 2ZJ"},"email":"abby.perkins@example.com","login":{"username":"redcat541","password":"1026","salt":"LIsOByBg","md5":"2890bf50a87289f7f3664840e2c47fe3","sha1":"1944896ba6cc78ad32dcf927dc5c9226d2f9e050","sha256":"9013be19c91195788009cc545f8a2be4494687dc29b155513022ce9157b73785"},"dob":"1959-05-20 07:03:41","registered":"2006-07-10 01:28:56","phone":"0101 716 4694","cell":"0738-649-138","id":{"name":"NINO","value":"BC 35 80 42 Q"},"picture":{"large":"https://randomuser.me/api/portraits/women/54.jpg","medium":"https://randomuser.me/api/portraits/med/women/54.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/54.jpg"},"nat":"GB"}],"info":{"seed":"2e632bbc13c85cb2","results":1,"page":1,"version":"1.1"}}

当我在console.log(data.name)时,我得到这个{“title”:“miss”,“first”:“abby”,“last”:“perkins”}等等,每次迭代我都会有所不同名。所以我想数据[0]中没有必要 - 看起来好像获得正确的数据对象一切正常。只需要访问data.name.title但没有运气。对不起,这次对我来说很困惑,因为每次上演时间都没有任何json obj或数组的问题

2 个答案:

答案 0 :(得分:2)

这是由构造函数引起的,但我不知道原因。

只需传递一个空数组就可以了。

this.state = {
    dataSource: ds.cloneWithRows([])
};

您也可以这样做:

this.state = {
    dataSource: ds.cloneWithRows([{name: "Ahmed"}])
};

有关更多信息,请参阅此处: https://facebook.github.io/react-native/docs/listviewdatasource.html#clonewithrows

答案 1 :(得分:1)

这是因为您的{data.name.title}直接在视图标记中。将其放在<Text>组件中,如下所示:

 <ListView
    dataSource={this.state.dataSource}
    renderRow={(data) =>
        <View>
            <Text>
                {data.phone}
            </Text>
            <Text>
                {data.name.title}
            </Text>   
        </View>
    }
    renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>