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

问题描述：

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

Trying to perform autocomplete suggestion by reading JSON data.

JSON数据的格式为:

The format of JSON data is:

 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数组中的companyname及其对应的TopfiveproductsList数组记录.
在下面的代码中，显示代码companyname，但不显示其对应的TopfiveproductsList.prodName.

Displaying companyname from locations array and its corresponding records of TopfiveproductsList array.
In below code companyname is displayed but its corresponding TopfiveproductsList.prodName are not displayed.

访问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>
        );
      }
    }

答

TopfiveproductsList是一个对象数组，您不能仅仅执行TopfiveproductsList.prodName来获取所需的内容.看来您需要使用字符串数组，因此必须自己构建:

TopfiveproductsList is an array of objects, you can't just do TopfiveproductsList.prodName to get what you need. It looks like you need to use an array of strings so you would have to build it yourself:

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

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

相关推荐