Display JSON into listview which has multiple json

Question

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

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);

Answer 1

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

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

Instead of using data try following:

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

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>
  );
}