How to iterate and render my fetch result in react native JSX

Question

{
  "status": true,
  "live_score_domestic": [
    {
      "nTournamentID": "1",
      "cTournamentName": "sample tournament.",
      "cTournamentType": "D",
      "dStartDate": "2016-12-10",
      "dEndDate": "2016-12-12",
      "matches": [
        {
          "cVenueCode": "TTAB",
          "cTableName": "Table 1",
          "cEventType": "Junior Boys",
          "cMatchNo": "5",
          "cRound": "First Round",
          "nScheduledDate": "2016-12-11",
          "nScheduledTime": "11:45:00",
          "teamname1": "MOTHER SCHOOL",
          "teamname2": "HARI SHEWA SCHOOL",
          "nVenueID": "1",
          "nTableID": "1",
          "nTeamID1": "3",
          "nTeamID2": "4",
          "nTournamentID": "1",
          "nFixtureDetailsID": "15",
          "nEventTypeID": "5",
          "image": "http://example.com/tt.png"
        },
        {
          "cVenueCode": "TTAB",
          "cTableName": "Table 1",
          "cEventType": "Junior Boys",
          "cMatchNo": "4",
          "cRound": "First Round",
          "nScheduledDate": "2016-12-11",
          "nScheduledTime": "11:30:00",
          "teamname1": "MOTHER SCHOOL",
          "teamname2": "HARI SHEWA SCHOOL",
          "nVenueID": "1",
          "nTableID": "1",
          "nTeamID1": "3",
          "nTeamID2": "4",
          "nTournamentID": "1",
          "nFixtureDetailsID": "14",
          "nEventTypeID": "5",
          "image": "http://example.com/tt.png"
        }
      ]
    }
  ],
  "live_score_international": [
    {
      "nTournamentID": "2",
      "cTournamentName": "International Tournament Sample",
      "cTournamentType": "I",
      "dStartDate": "2016-12-22",
      "dEndDate": "2016-12-24",
      "matches": []
    }
  ],
  "results_domestic": [
    {
      "nTournamentID": "1",
      "cTournamentName": "sample tournament.",
      "cTournamentType": "D",
      "dStartDate": "2016-12-10",
      "dEndDate": "2016-12-12",
      "matches": [
        {
          "cVenueCode": "TTAB",
          "cTableName": "Table 1",
          "cEventType": "Junior Boys",
          "cMatchNo": "5",
          "cRound": "First Round",
          "nScheduledDate": "2016-12-11",
          "nScheduledTime": "11:45:00",
          "teamname1": "MOTHER SCHOOL",
          "teamname2": "HARI SHEWA SCHOOL",
          "nVenueID": "1",
          "nTableID": "1",
          "nTeamID1": "3",
          "nTeamID2": "4",
          "nTournamentID": "1",
          "nFixtureDetailsID": "15",
          "nEventTypeID": "5",
          "image": "http://example.com/tt.png"
        },
        {
          "cVenueCode": "TTAB",
          "cTableName": "Table 1",
          "cEventType": "Junior Boys",
          "cMatchNo": "4",
          "cRound": "First Round",
          "nScheduledDate": "2016-12-11",
          "nScheduledTime": "11:30:00",
          "teamname1": "MOTHER SCHOOL",
          "teamname2": "HARI SHEWA SCHOOL",
          "nVenueID": "1",
          "nTableID": "1",
          "nTeamID1": "3",
          "nTeamID2": "4",
          "nTournamentID": "1",
          "nFixtureDetailsID": "14",
          "nEventTypeID": "5",
          "image": "http://example.com/tt.png"
        }
      ]
    }
  ],
  "results_international": [
    {
      "nTournamentID": "2",
      "cTournamentName": "International Tournament Sample",
      "cTournamentType": "I",
      "dStartDate": "2016-12-22",
      "dEndDate": "2016-12-24",
      "matches": []
    }
  ],
  "fixture_point_domestic": [
    {
      "nTournamentID": "1",
      "cTournamentName": "sample tournament.",
      "cTournamentType": "D",
      "dStartDate": "2016-12-10",
      "dEndDate": "2016-12-12"
    }
  ],
  "fixture_point_international": [
    {
      "nTournamentID": "2",
      "cTournamentName": "International Tournament Sample",
      "cTournamentType": "I",
      "dStartDate": "2016-12-22",
      "dEndDate": "2016-12-24"
    }
  ]
}

This is the fetch result.I want to render first a heading like domestic Tournaments.Then i want to loop for al tornaments in domestic.Then all matches in each tournament.How i can do this?Anyone to help.thanks in advance :)

can you please help me to figure out how to iterate all

score 0 · Answer 1 · answered Feb 28 '17 at 21:43

First of all you should decide on how the data should be displayed on the screen. Should they be clickable or not, scrolled or not, what part of screen they should take etc. And depending on the visual design of your future application you can make a choice what exact react-native visual component will represent the data on the screen by the best way.

For example, if it is applicable by visual design of your application you can take a look at the react-native ListView or ScrollView components to render endless list of identical complex data.

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

If iterating through that entire JSON object is your intent, then an easy approach is a for...in loop.

For example:

var obj = {a: 1, b: 2, c: {a: 1, b: 2}};
function walk(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var val = obj[key];
      console.log(val);
      walk(val);
    }
  }
}
walk(obj);

Taken from: iterating through json object javascript

edited May 23 '17 at 12:09

Community

1
1

answered Feb 28 '17 at 22:09

Teedub

372
1
7

score 0 · Answer 3 · answered Aug 15 '17 at 02:22

0

Object.keys(data).map((key) => { ... })

This will use the object properties (live_score_domestic, live_score_international, etc) to iterate through the top most data. Then you can use data[key] to get throught its contents.

answered Aug 15 '17 at 02:22

justelouise

714
1
5
20

How to iterate and render my fetch result in react native JSX

3 Answers3