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

Question

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

下面是我要使用的 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>
  );
}

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

Display JSON into listview which has multiple json arrays

mobile-application

react-native