Complex JSON structure with JS

Question

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.

• Fissure King: Is there some way for iterarte through this ugly JSON? - You have multiple options, depending upon what exactly you're trying to accomplish. Can you explain a little more about what you're trying to get, what you are iterating over, etc.?
• Kétor: I added some more info on the main post
• Turnip: Are you able to change the JSON structure? Looks to me like "game" should be an array of objects rather than an object. Same with "event".
• Kétor: I can't edit the JSON structure. I get it through an external API
• Fissure King: You can iterate over games: Object.entries(arr_from_json.data.data.region[123].game).forEach(([id, data]) => . . . ), then follow a similar pattern to extract data for each market. Does that get you closer? Still not 100% clear what the end result is: do you want to create this table for each game in each market?

Answer 1

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

• Kétor: Looks nice. Will take a look to this!