Wie erstelle ich eine for-Schleife aus einer JSON-Datei mit vielen der gleichen Felder und zeige es in HTML?

-2

Ich möchte in der Lage sein, einen Wert zurückzugeben, der jedes Spiel in einem separaten div auf einer HTML-Seite zeigt. Ich weiß, dass es etwas Javascript darin geben würde, das dafür erlauben würde, die Spiele durchzulaufen. Ich bin mir nicht sicher, was es ist. Kann jemand diese Daten in HTML und Javascript anzeigen? Ich möchte die Heimmannschaft, die Auswärtsmannschaft und das geplante Feld für jedes Spiel bekommen. Danke im Voraus.Wie erstelle ich eine for-Schleife aus einer JSON-Datei mit vielen der gleichen Felder und zeige es in HTML?

"games": [ 
{ 
    "id": "3950bf88-7d69-45cb-957f-9b73ffca1d6e", 
    "status": "closed", 
    "coverage": "full", 
    "scheduled": "2015-10-28T00:00:00+00:00", 
    "venue": { 
    "id": "fd21f639-8a47-51ac-a5dd-590629d445cf", 
    "name": "Philips Arena", 
    "capacity": 18047, 
    "address": "One Philips Drive", 
    "city": "Atlanta", 
    "state": "GA", 
    "zip": "30303", 
    "country": "USA" 
    }, 
    "broadcast": { 
    "network": "FS-SE", 
    "satellite": "649" 
    }, 
    "home": { 
    "name": "Atlanta Hawks", 
    "alias": "ATL", 
    "id": "583ecb8f-fb46-11e1-82cb-f4ce4684ea4c" 
    }, 
    "away": { 
    "name": "Detroit Pistons", 
    "alias": "DET", 
    "id": "583ec928-fb46-11e1-82cb-f4ce4684ea4c" 
    } 
}, 
{ 
    "id": "f00b4cf7-4722-4ffb-8d6a-9d378f370228", 
    "status": "closed", 
    "coverage": "full", 
    "scheduled": "2015-10-28T00:00:00+00:00", 
    "venue": { 
    "id": "38911649-acfd-551a-949b-68f0fcaa44e7", 
    "name": "United Center", 
    "capacity": 20917, 
    "address": "1901 W. Madison St.", 
    "city": "Chicago", 
    "state": "IL", 
    "zip": "60612", 
    "country": "USA" 
    }, 
    "broadcast": { 
    "network": "TNT", 
    "satellite": "245" 
    }, 
    "home": { 
    "name": "Chicago Bulls", 
    "alias": "CHI", 
    "id": "583ec5fd-fb46-11e1-82cb-f4ce4684ea4c" 
    }, 
    "away": { 
    "name": "Cleveland Cavaliers", 
    "alias": "CLE", 
    "id": "583ec773-fb46-11e1-82cb-f4ce4684ea4c" 
    }

Quelle

2016-03-29 evan

ich vorschlagen würde d3js – Pbd

mustache.js verwendet, ist eine einfache Möglichkeit, json in sinnvolle HTML – dandavis

<html> 
    <head> 
     <script> 

      games = [ 
{ 
    "id": "3950bf88-7d69-45cb-957f-9b73ffca1d6e", 
    "status": "closed", 
    "coverage": "full", 
    "scheduled": "2015-10-28T00:00:00+00:00", 
    "venue": { 
    "id": "fd21f639-8a47-51ac-a5dd-590629d445cf", 
    "name": "Philips Arena", 
    "capacity": 18047, 
    "address": "One Philips Drive", 
    "city": "Atlanta", 
    "state": "GA", 
    "zip": "30303", 
    "country": "USA" 
    }, 
    "broadcast": { 
    "network": "FS-SE", 
    "satellite": "649" 
    }, 
    "home": { 
    "name": "Atlanta Hawks", 
    "alias": "ATL", 
    "id": "583ecb8f-fb46-11e1-82cb-f4ce4684ea4c" 
    }, 
    "away": { 
    "name": "Detroit Pistons", 
    "alias": "DET", 
    "id": "583ec928-fb46-11e1-82cb-f4ce4684ea4c" 
    } 
}, 
{ 
    "id": "f00b4cf7-4722-4ffb-8d6a-9d378f370228", 
    "status": "closed", 
    "coverage": "full", 
    "scheduled": "2015-10-28T00:00:00+00:00", 
    "venue": { 
    "id": "38911649-acfd-551a-949b-68f0fcaa44e7", 
    "name": "United Center", 
    "capacity": 20917, 
    "address": "1901 W. Madison St.", 
    "city": "Chicago", 
    "state": "IL", 
    "zip": "60612", 
    "country": "USA" 
    }, 
    "broadcast": { 
    "network": "TNT", 
    "satellite": "245" 
    }, 
    "home": { 
    "name": "Chicago Bulls", 
    "alias": "CHI", 
    "id": "583ec5fd-fb46-11e1-82cb-f4ce4684ea4c" 
    }, 
    "away": { 
    "name": "Cleveland Cavaliers", 
    "alias": "CLE", 
    "id": "583ec773-fb46-11e1-82cb-f4ce4684ea4c" 
    } 
} 
       ]; 


     </script> 
    </head> 

    <body> 

    </body> 

    <script> 
     for(g in games) 
      { 
       d = document.createElement('div'); 
       d.innerText = games[g].scheduled+games[g].home.name+games[g].away.name; 
       document.body.appendChild(d); 
      } 
    </script> 
</html>

Quelle

2016-03-29 03:21:18 Pbd

Vielen Dank zu drehen! – evan

haken Sie einfach die Antwort plz – Pbd

Ich tat, aber es sagt, dass ich einige Rufpunkte verdienen muss, um dies zu tun. – evan

dies ist eine for-Schleife Felder, die Sie erhalten müssen.

for(var i=0;i<games.length;i++){ 
    console.log('home'+i+games[i].home.name); 
    console.log('away'+i+games[i].away.name); 
    console.log('scheduled'+i+games[i].scheduled); 
}

Quelle

2016-03-29 03:25:02

Woops mein Schlechter, es gibt zwei Elemente. – char

Vielen Dank! – evan

Iterieren Sie über das Array und holen Sie die entsprechenden Schlüssel. Dann können Sie diese in ein beliebiges HTML-Element einfügen, d. H. Div, span, p. Sie können diesen Elementen auch Stile entsprechend Ihrer Anforderung zuweisen.

Im folgenden Ausschnitt habe ich einen Zeilenumbruch 'BR-Tag' hinzugefügt und an Körper angehängt. Es ist eine reine Javascript-Implementierung. Sie können es in Ihren spezifischen Container/div einfügen.

var _innerHtml=""; 
    data.games.forEach(function(d){_innerHtml+=('scheduled:'+d.scheduled+', hometeam:'+d.home.name+', awayTeam:'+d.away.name+'<br/>')}); 
document.body.innerHTML=_innerHtml

Quelle

2016-03-29 03:27:44

Vielen Dank! – evan

Wie erstelle ich eine for-Schleife aus einer JSON-Datei mit vielen der gleichen Felder und zeige es in HTML?

Antwort

Verwandte Themen