在JSON中訪問數組內部的數組React-Native

Question

• 試圖通過讀取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" 
       } 
      ] 
  

• 顯示從locations陣列和TopfiveproductsList陣列的其相應的記錄companyname。
  在下面的代碼中顯示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> 
     ); 
     } 
    } 

Answer 1

TopfiveproductsList是對象的數組，你不能只是做TopfiveproductsList.prodName得到你所需要的。它看起來像你需要使用一個字符串數組，所以你就必須建立它自己：

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