Accessing array inside array in JSON React-Native

Question

• Trying to perform autocomplete suggestion by reading JSON data.

• 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" } ] 

• 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.

• Accessing prodName gives error 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>
        );
      }
    }

Answer 1

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   }}
    />