在JSON React-Native中访问数组内部的数组

问题描述

• 尝试通过读取JSON数据执行自动完成建议。

• JSON数据的格式为：

    locations: [ { "Companyname": "pqr", "TopfiveproductsList": [ { "prodId": "16", "prodName": "abc" }, { "prodId": "17", "prodName": "xyz" } ], "companycode": "C1" }, { "Companyname": "zzz", "TopfiveproductsList": [ { "prodId": "12", "prodName": "yyy" }, { "prodId": "14", "prodName": "lmn" }, { "prodId": "32", "prodName": "qaq" } ], "companycode": "C2" } ] 

• 显示companyname从locations阵列和它的相应的记录TopfiveproductsList阵列。
  在下面的代码companyname被显示，但其相应的TopfiveproductsList.prodName不显示。

• 访问prodName会导致错误JSON parse error: Unexpected identifier object 。

   <Autocomplete autoCapitalize="none" autoCorrect={false} data={locations} defaultValue={query} onChangeText={text => this.setState({ query: text })} renderItem={({ Companyname, TopfiveproductsList.prodName }) => ( <Text>{Companyname} {TopfiveproductsList.prodName}</Text )} /> 

index.android.js

 import Sample from './sample.json';
    export default class pre extends Component {
      constructor(props) {
        super(props);
        this.state = {
          locations: [],
          query: '',
        };
      }

      loadData() {
       this.setState({ locations : Sample });  
    }

      findLocation(query) {
          this.loadData();

        const { locations } = this.state;
        const regex = new RegExp(`${query.trim()}`, 'i');
        return locations.filter(location => location.Companyname.search(regex) >= 0);
      }

      render() {
        const { query } = this.state;
        const locations = this.findLocation(query);
        return (
         <View>
            <Autocomplete
              autoCapitalize="none"
              autoCorrect={false} 
              data={locations}
              defaultValue={query}
              onChangeText={text => this.setState({ query: text })}
              renderItem={({ Companyname }) => (
                  <Text> {Companyname} </Text> )}
            />
           </View>
        );
      }
    }