title: Accessing array inside array in JSON React-Native
body: <ul>
  <li><p>Trying to perform autocomplete suggestion by reading JSON data. </p></li>
  <li><p>The format of JSON data is:  </p>
  
  <pre><code> 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"
         }
       ]
  </code></pre></li>
  <li><p>Displaying <code>companyname</code> from <code>locations</code> array and its corresponding records of <code>TopfiveproductsList</code> array.<br>
  In below code <code>companyname</code> is displayed but its corresponding <code>TopfiveproductsList.prodName</code> are not displayed. </p></li>
  <li><p>Accessing <code>prodName</code> gives error <code>JSON parse error: Unexpected identifier object</code>.  </p>
  
  <pre><code>&lt;Autocomplete
      autoCapitalize="none"
      autoCorrect={false} 
      data={locations}
      defaultValue={query}
      onChangeText={text =&gt; this.setState({ query: text })}
      renderItem={({ Companyname, TopfiveproductsList.prodName }) =&gt; (
          &lt;Text&gt;{Companyname} {TopfiveproductsList.prodName}&lt;/Text   )}
      /&gt;
  </code></pre></li>
  </ul>
  
  <p><strong>index.android.js</strong></p>
  
  <pre><code> 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 =&gt; location.Companyname.search(regex) &gt;= 0);
        }
  
        render() {
          const { query } = this.state;
          const locations = this.findLocation(query);
          return (
           &lt;View&gt;
              &lt;Autocomplete
                autoCapitalize="none"
                autoCorrect={false} 
                data={locations}
                defaultValue={query}
                onChangeText={text =&gt; this.setState({ query: text })}
                renderItem={({ Companyname }) =&gt; (
                    &lt;Text&gt; {Companyname} &lt;/Text&gt; )}
              /&gt;
             &lt;/View&gt;
          );
        }
      }
  </code></pre>