Kétor
Kétor

Reputation: 13

Complex JSON structure with JS

I'm looking for a way to generate an HTML table from a JSON data.

I'm limitated with tooling options because we use CMS, so I can only use JS, JQuery and ApacheVelocity (without making new templates, only using the 'syntax').

Well, I get this kind of JSON data from remote API:

{
    "code": 0,
    "rid": "0",
    "data": {
        "subid": "-7766883411351472375",
        "data": {
            "region": {
                "123": {
                    "alias": "Europe",
                    "game": {
                        "11811809": {
                            "id": 11811809,
                            "team1_name": "Zorya Luhansk",
                            "team2_name": "SC Braga",
                            "market": {
                                "188597332": {
                                    "type": "P1XP2",
                                    "name": "Ganador del Partido",
                                    "event": {
                                        "624566458": {
                                            "price": 2.39,
                                            "name": "W1"
                                        },
                                        "624566459": {
                                            "price": 3.01,
                                            "name": "X"
                                        },
                                        "624566460": {
                                            "price": 2.82,
                                            "name": "W2"
                                        }
                                    }
                                }
                            }
                        },
                        "11811810": {
                            "id": 11811810,
                            "team1_name": "Olympiacos Piraeus",
                            "team2_name": "FC Luzern",
                            "market": {
                                "188597340": {
                                    "type": "P1XP2",
                                    "name": "Ganador del Partido",
                                    "event": {
                                        "624566476": {
                                            "price": 1.34,
                                            "name": "W1"
                                        },
                                        "624566477": {
                                            "price": 4.29,
                                            "name": "X"
                                        },
                                        "624566478": {
                                            "price": 7.92,
                                            "name": "W2"
                                        }
                                    }
                                }
                            }
                        },
                        "11844220": {
                            "id": 11844220,
                            "team1_name": "NK Domzale",
                            "team2_name": "FC Ufa",
                            "market": {
                                "189338624": {
                                    "type": "P1XP2",
                                    "name": "Ganador del Partido",
                                    "event": {
                                        "626913821": {
                                            "price": 2.35,
                                            "name": "W1"
                                        },
                                        "626913822": {
                                            "price": 2.86,
                                            "name": "X"
                                        },
                                        "626913823": {
                                            "price": 3.03,
                                            "name": "W2"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

The first problem I face are those numeric indexes. The only way to make reference to this is like this:

arr_from_json.data.data.region[123].game[11844220].team1_name

It is ok if we only have a few "games" extracted, even 100 games. But it is impossible to keep it updated with thousands of games who are constantly being updated.

Is there some way for iterarte through this ugly JSON structure?

Many thanks


Edit:

I want to create a table with the distinct games:

Zorya Luhansk - SC Braga
    W1       X       W2
    2.39     3.01    2.82

Most important data/keys to me are: both team names, name of the possible outcome and price.

Upvotes: 1

Views: 566

Answers (1)

jmcgriz
jmcgriz

Reputation: 3358

You can convert those indexed objects into traditional arrays using a helper function, then iterate over the data in a more natural way after transforming it. See below for an example using Array.map and the helper function keysToArray(obj){ return Object.keys(obj).map(key => obj[key]); }

const resp = {
    "code": 0,
    "rid": "0",
    "data": {
        "subid": "-7766883411351472375",
        "data": {
            "region": {
                "123": {
                    "alias": "Europe",
                    "game": {
                        "11811809": {
                            "id": 11811809,
                            "team1_name": "Zorya Luhansk",
                            "team2_name": "SC Braga",
                            "market": {
                                "188597332": {
                                    "type": "P1XP2",
                                    "name": "Ganador del Partido",
                                    "event": {
                                        "624566458": {
                                            "price": 2.39,
                                            "name": "W1"
                                        },
                                        "624566459": {
                                            "price": 3.01,
                                            "name": "X"
                                        },
                                        "624566460": {
                                            "price": 2.82,
                                            "name": "W2"
                                        }
                                    }
                                }
                            }
                        },
                        "11811810": {
                            "id": 11811810,
                            "team1_name": "Olympiacos Piraeus",
                            "team2_name": "FC Luzern",
                            "market": {
                                "188597340": {
                                    "type": "P1XP2",
                                    "name": "Ganador del Partido",
                                    "event": {
                                        "624566476": {
                                            "price": 1.34,
                                            "name": "W1"
                                        },
                                        "624566477": {
                                            "price": 4.29,
                                            "name": "X"
                                        },
                                        "624566478": {
                                            "price": 7.92,
                                            "name": "W2"
                                        }
                                    }
                                }
                            }
                        },
                        "11844220": {
                            "id": 11844220,
                            "team1_name": "NK Domzale",
                            "team2_name": "FC Ufa",
                            "market": {
                                "189338624": {
                                    "type": "P1XP2",
                                    "name": "Ganador del Partido",
                                    "event": {
                                        "626913821": {
                                            "price": 2.35,
                                            "name": "W1"
                                        },
                                        "626913822": {
                                            "price": 2.86,
                                            "name": "X"
                                        },
                                        "626913823": {
                                            "price": 3.03,
                                            "name": "W2"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

function keysToArray(obj){ return Object.keys(obj).map(key => obj[key]); }

function parseGameData(data){
  return keysToArray(data.region).map(obj => keysToArray(obj.game).map(obj => {
        obj.market = keysToArray(obj.market).map(obj => {
          return {
            name: obj.name,
            event: keysToArray(obj.event)
          }
        })
        return obj
      }))
}

console.log(parseGameData(resp.data.data))

Upvotes: 1

Related Questions