Convert multiple JSON Data into HTML table

Question

i have some large experience in HTML and CSS but not much in JS and Jquery,i'm looking to put JSON data (text and images in my case) into a HTML table, but after days of research nothing seems to work for me, this is the JSON data.

[
 {
    "event": "ESL One Cologne 2018",
    "maps": "bo3",
    "team1": {
       "name": "Astralis",
       "crest": "https://static.hltv.org/images/team/logo/6665",
       "result": 1
   },
   "team2": {
       "name": "Natus Vincere",
       "crest": "https://static.hltv.org/images/team/logo/4608",
       "result": 2
   },
   "matchId": "/matches/2324404/astralis-vs-natus-vincere-esl-one-cologne-2018"
 },
 {
    "event": "Americas Minor - FACEIT Major 2018",
    "maps": "bo3",
    "team1": {
       "name": "eUnited",
       "crest": "https://static.hltv.org/images/team/logo/7106",
       "result": 2
     },
     "team2": {
       "name": "Não Tem Como",
       "crest": "https://static.hltv.org/images/team/logo/6267",
       "result": 0
    },
    "matchId": "/matches/2324618/eunited-vs-no-tem-como-americas-minor-faceit-major-2018"
},

I tried a lot of different code so far but nothing seems to work because 1) i don't know how to pick the field "name" inside the "team 1"and "team 2" field and 2) i don't exactly know if you could actually put the image of the team near the team name. Hope that at least one of your suggestions works. Thanks

You state: "after days of searching" - but this is basic to any JS programming? There are tons of resources to learn from, this is simple stuff. — ProEvilz, Jul 07 '18 at 21:09
What do you mean with putting the images near the team name? — baao, Jul 07 '18 at 21:14
Please show the "different code" you've tried. Please also show where your research lead you. — Heretic Monkey, Jul 07 '18 at 23:03

score 0 · Answer 1 · answered Jul 07 '18 at 23:00

0

you can turn the JSON into a JavaScript object using JSON.parse(your_json);

I am not sure how you want to format your data in the table, so I can't help with that, but it is very simple JavaScript

answered Jul 07 '18 at 23:00

Joe C.

397
4
15

Convert multiple JSON Data into HTML table

1 Answers1