将JSON显示到具有多个json数组的listview中 [英] Display JSON into listview which has multiple json arrays

问题描述

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

I am developing an react native app and i want to display json object containing an array .I want to know how display that data into listview .My problem is i wont able to display content for all the array ,it only displaying data for first array index and not and entire list of arrays

下面是我要使用的json:-

Below is my json which i am going to use:-

{
  "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.

You should invoke the cloneWithRows with the array and not an object.

renderRow将与数组的每个条目一起调用->您无需为此编写循环.

renderRow will be invoked with each entry of your array -> you don't need to write a loop for that.

而不是使用data，请尝试以下操作:

Instead of using data try following:

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

现在，您需要像这样修改您的renderRow方法:

Now you need to adapt your renderRow method like this:

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数组的listview中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！