如何获取 json 嵌套对象？答案

【问题标题】：How do I get the json nested object?如何获取 json 嵌套对象？
【发布时间】：2016-09-24 12:47:25
【问题描述】：

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

未定义不是对象

这是我的代码。

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"} 等等每次迭代我得到不同名字。所以我想 data[0] 不需要 - 看起来一切都可以得到正确的数据对象。只需要访问 data.name.title 但没有运气。抱歉，这次让我很困惑，因为每次之前的任何 json obj 或数组都没有问题

【问题讨论】：

标签： json react-native

【解决方案1】：

这是由构造函数引起的，但我不知道为什么。

只需传递一个空数组即可。

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

你也可以这样做：

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

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

【讨论】：

@SERG 很高兴能提供帮助。

【解决方案2】：

这是因为您的{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} />}
/>

【讨论】：

谢谢，现在我得到“未定义不是对象”
这只是解析JSON，React没有什么不同。也许你的json里面没有名字，你的renderRow中的console.log(data)看看你的数据是什么。
在这个例子中 medium.com/differential/… 他们只是使用 props.name.last - 它有效，所以它不是“无名”，但由于某些原因它对我不起作用
那么当你在renderRow中记录数据时你会得到什么？我再重复一遍，在 json 中获取嵌套对象在任何地方都是一样的。根据您从服务器获得的数据，您的结果是一个数组，因此您应该根据该数据执行 {data[0].name.title}
这很奇怪。然后，您应该可以通过 data.name.title 获得标题。我会在我的机器上检查你的代码。