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.

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.? — Fissure King
– Fissure King, Commented Aug 2, 2018 at 14:32
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". — Turnip
– Turnip, Commented Aug 2, 2018 at 14:47
I can't edit the JSON structure. I get it through an external API — Kétor
– Kétor, Commented Aug 2, 2018 at 15:08
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? — Fissure King
– Fissure King, Commented Aug 2, 2018 at 15:23

jmcgriz · Accepted Answer · 2018-08-02 15:23:45Z

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

Collectives™ on Stack Overflow

Complex JSON structure with JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related