在JSON React-Native中访问数组内部的数组 [英] Accessing array inside array in 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中访问数组内部的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！