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

debugcn 发表于 Dev

史密斯夏洛克

我正在开发一个本机应用程序，我想显示包含数组的 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);

托比亚斯·林斯

您应该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>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。