将 JSON 显示到具有多个 json 数组的列表视图中

Question

我正在开发一个反应原生应用程序，我想显示包含数组的 json 对象。我想知道如何将该数据显示到列表视图中。我的问题是我无法显示所有数组的内容，它只显示数据对于第一个数组索引而不是整个数组列表

下面是我要使用的json：-

{
  "response": {
    "airlinedetails": [
      {
        "airlinecode": "9W",
        "airlinelogopath": "9W.png",
        "totalprice": "4478",
        "airlinename": "Jet Airways",
        "noofstops": "0",
        "nonstop": "Y",
        "airlineRecommend": "N",
        "noofflights": 6,
        "originaltp": "4449"
      },
      {
        "airlinecode": "SG",
        "airlinelogopath": "SG.png",
        "totalprice": "4511",
        "airlinename": "Spicejet",
        "noofstops": "0",
        "nonstop": "Y",
        "airlineRecommend": "N",
        "noofflights": 3,
        "originaltp": "4483"
      },      {
        "airlinecode": "UK",
        "airlinelogopath": "UK.png",
        "totalprice": "6319",
        "airlinename": "Vistara",
        "noofstops": "0",
        "nonstop": "Y",
        "airlineRecommend": "N",
        "noofflights": 1,
        "originaltp": "6280"
      },
      {
        "airlinecode": "AI",
        "airlinelogopath": "AI.png",
        "totalprice": "4499",
        "airlinename": "Air India",
        "noofstops": "0",
        "nonstop": "Y",
        "airlineRecommend": "N",
        "noofflights": 17,
        "originaltp": "4470"
      },
      {
        "airlinecode": "6E",
        "airlinelogopath": "6E.png",
        "totalprice": "4852",
        "airlinename": "Indigo Airlines",
        "noofstops": "0",
        "nonstop": "Y",
        "airlineRecommend": "N",
        "noofflights": 6,
        "originaltp": "4820"
      }`enter code here`
    ],





Tell me how to display it using map function as renderrow is called only once ,how to iterate through all those arrays of airlindetails. How to loop through JSON and print all the values and not just index 0 values of airlinedetails




This is my react native code ,i have add for loop to iterate through json but it doesnt work like expected as it iterate through only through first index


import React, { Component } from 'react';
import { StyleSheet, View, ListView, Image, Text,AppRegistry } from 'react-native';

import data from './flights.json';

export default class Navin extends Component {

constructor(props) {
     super(props);
     var ds = new ListView.DataSource({
       rowHasChanged: (r1, r2) => r1 !== r2
     });

      this.state = {
        dataSource: ds.cloneWithRows(data),
    };
  }

  renderRow(record) {

    for(var i=0;i<5;i++){
     return (

      <View style={styles.row}>
        <View style={styles.info}>

          <Text style={styles.items}>{record.airlinedetails[i].airlinecode}         </Text>
          <Text style={styles.address}>{record.airlinedetails[i].airlinecode}</Text>
        </View>
        <View style={styles.total}>
          <Text style={styles.date}>{record.airlinedetails[i].airlinecode}</Text>
          <Text style={styles.price}>${record.airlinedetails[i].airlinecode}   </Text>
        </View>
      </View>

       );
        continue;
  }      
    }
     render() {
      return (
       <View style={styles.mainContainer}>
        <Text style={styles.title}>Flights</Text>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </View>
      );
     }
    }

    const styles = StyleSheet.create({
      mainContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  title: {
    backgroundColor: '#0f1b29',
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    padding: 10,
    paddingTop: 40,
    textAlign: 'center',
  },
  row: {
    borderColor: '#f1f1f1',
    borderBottomWidth: 1,
    flexDirection: 'row',
    marginLeft: 10,
    marginRight: 10,
    paddingTop: 20,
    paddingBottom: 20,
  },
  iconContainer: {
    alignItems: 'center',
    backgroundColor: '#feb401',
    borderColor: '#feaf12',
    borderRadius: 25,
    borderWidth: 1,
    justifyContent: 'center',
    height: 50,
    width: 50,
  },
  icon: {
    tintColor: '#fff',
    height: 22,
    width: 22,
  },
  info: {
    flex: 1,
    paddingLeft: 25,
    paddingRight: 25,
  },
  items: {
    fontWeight: 'bold',
    fontSize: 16,
    marginBottom: 5,
  },
  address: {
    color: '#ccc',
    fontSize: 14,
  },
  total: {
    width: 80,
  },
  date: {
    fontSize: 12,
    marginBottom: 5,
  },
  price: {
    color: '#1cad61',
    fontSize: 25,
    fontWeight: 'bold',
  },
});

AppRegistry.registerComponent('Navin', () => Navin);

Answer 1

您应该使用数组而不是对象调用cloneWithRows。

renderRow 将被数组的每个条目调用 -> 你不需要为此编写循环。

不要使用data，请尝试以下操作：

dataSource: ds.cloneWithRows(data.response.airlinedetails),

现在您需要像这样调整您的 renderRow 方法：

renderRow(record) {
  return (
    <View style={styles.row}>
      <View style={styles.info}>
        <Text style={styles.items}>{record.airlinecode}</Text>
        <Text style={styles.address}>{record.airlinecode}</Text>
      </View>
      <View style={styles.total}>
        <Text style={styles.date}>{record.airlinecode}</Text>
        <Text style={styles.price}>${record.airlinecode}</Text>
      </View>
    </View>
  );
}