JSON parsing in React Native ListView

Question

I have this JSON which I would like to show on a ListView

{
   "ZoneInfo":{
      "Name":"Hollywood",
      "AttractionsInfo":[
         {
            "ContentType":"USSShow",
            "Availability":"True",
            "Name":"Mel's Dinettes ",
            "NextShowTime":"1:00PM",
            "QueueTime":"",
            "ShowTime":"1:00PM, 3:40PM and 6:15PM",
            "WeatherStatus":"True"
         },
         {
            "ContentType":"USSShow",
            "Availability":"True",
            "Name":"Sesame Street Show -  When I Grow Up ®",
            "NextShowTime":"12:15PM",
            "QueueTime":"",
            "ShowTime":"12:15PM, 3:00PM and 5:40PM",
            "WeatherStatus":"True"
         },
         {
            "ContentType":"USSShow",
            "Availability":"True",
            "Name":"The Cruisers",
            "NextShowTime":"10:45AM",
            "QueueTime":"",
            "ShowTime":"10:45AM, 2:00PM and 4:45PM",
            "WeatherStatus":"True"
         },
         {
            "ContentType":"USSShow",
            "Availability":"True",
            "Name":"The Minions From Despicable Me ",
            "NextShowTime":"12:40PM",
            "QueueTime":"",
            "ShowTime":"12:40PM, 2:20PM, 4:40PM and 6:40PM",
            "WeatherStatus":"True"
         },
         {
            "ContentType":"USSMeetAndGreet",
            "Availability":"True",
            "Name":"The Walk of Fame",
            "NextShowTime":"",
            "QueueTime":"",
            "ShowTime":"",
            "WeatherStatus":"True"
         }
      ]
   }
}

The section name will be from ZoneInfo.Name. The contents of each row will be AttractionsInfo.Name

This is my current code

<ListView                     
   dataSource={this.state.dataSource}
   renderRow={this.renderRow}
   enableEmptySections={true}
   renderSectionHeader={this.renderSectionHeader}/>
}

renderRow(rowData: string, sectionID: number, rowID: number) {
    return (
      <View>
        <Text>{sectionID.Name}</Text>
      </View>
    )
}

renderSectionHeader(sectionData, category) {
  return (
    <View>
        <Text>{category}</Text>
    </View>
  )
}

How can I achieve what I want?

Answer 1

You can use cloneWithRows to directly map your JSON to your listview data source. Each attraction will automatically be passed to your renderRow function.

const myjson = ...

export default class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
  }

  componentDidMount() {    
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(myjson.ZoneInfo.AttractionsInfo)
    });
  }

  renderRow(attraction) {
      return (
        <View>
          <Text>{attraction.Name}</Text>
        </View>
      )
  }

  renderSectionHeader() {
    return (
      <View>
          <Text>{myjson.ZoneInfo.Name}</Text>
      </View>
    )
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',}}>
       <ListView                     
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          renderHeader={this.renderSectionHeader.bind(this)}
          enableEmptySections={true}
        />
      </View>
    );
  }
}