JSON array naar html

[Senaxx]

Hobby matig wil ik graag iets gaan maken. Ik heb een JSON source en dit wil als bron gaan gebruiken om dit naar een html pagina te gaan zetten. Nu heb ik het een en ander aan onderzoek gedaan naar JQuery i.c.m. JSON maar ik kom er niet helemaal uit. Ik heb weinig kennis van javascript en wil hier ook iets meer van gaan leren.

Nu heb ik mij verdiept in hoe Arrays in JSON werken en hoe je deze kan uitvragen. Nu is echter de opbouw van mijn JSON iets anders dan in het gemiddelde voorbeeld. En met alle onderzoeken kom ik er helaas niet uit hoe ik dit wel moet doen. Misschien zie ik een bepaalde functie over het hoofd of waar ik het bestaan (nog) niet van weet.

Voorbeeld JSON:

code:

{
   "description":"Omschrijving",
   "banner":"http:\/\/banner.jpg",
   "episodes":{
      "1":[
         {
            "id":"1",
            "active":1,
            "lang":"en",
            "link":"http:\/\/link.com"
         }
      ],
      "2":[
         {
            "id":"2",
            "active":1,
            "lang":"ru",
            "link":"http:\/\/link.com"
         },
         {
            "id":"3",
            "active":1,
            "lang":"en",
            "link":"http:\/\/link.com"
         }
      ],
      "3":[
         {
            "id":"4",
            "active":1,
            "lang":"en",
            "link":"http:\/\/link.com"
         },
         {
            "id":"5",
            "active":1,
            "lang":"ru",
            "link":"http:\/\/link.com"
         }
      ]
   }
}

Bij bovenstaande code kan ik prima de description, en de banner uitvragen. Het lukt mij echter niet alles uit te vragen wat er in "episodes" zit en de childs hiervan (weet niet of dat in javascript zo genoemd wordt). Mijn doel is uiteindelijk dat ik dit netjes kan uitvragen en dit kan gaan opmaken in HTML. Zou iemand mij een zetje in de juiste richting kunnen geven?

[RobIII]

JavaScript:

//Je JSON. Hier hardcoded, maar ik ga er even van uit dat je iets als var foo = $.getJSON(...) doet o.i.d.
var foo = {"description":"Omschrijving","banner":"http:\/\/banner.jpg","episodes":{"1":[{"id":"1","active":1,"lang":"en","link":"http:\/\/link.com"}],"2":[{"id":"2","active":1,"lang":"ru","link":"http:\/\/link.com"},{"id":"3","active":1,"lang":"en","link":"http:\/\/link.com"}],"3":[{"id":"4","active":1,"lang":"en","link":"http:\/\/link.com"},{"id":"5","active":1,"lang":"ru","link":"http:\/\/link.com"}]}};

//Enkel item benaderen:
console.log(foo.episodes);
console.log(foo.episodes['2']);
console.log(foo.episodes['2'][1].id);
console.log(foo.episodes['2'][1].link);

//Itereren:
$.each(foo.episodes, function (index, value) {
    console.log("Episode:", index);

    $.each(value, function (index, value) {
        console.log("\t", "Id:" + value.id, "Active:" + (value.active == 1), "Lang:" + value.lang, "Link:" + value.link);
    });
});

//Of:
$.each(foo.episodes, function (epindex, value) {
    $.each(value, function (fooindex, value) {
        console.log("Episode:" + epindex, "Id:" + value.id, "Active:" + (value.active == 1), "Lang:" + value.lang, "Link:" + value.link);
    });
});

Hier de jsfiddle (en eentje en nog eentje waarin je ziet hoe je moet itereren over de items) zodat je er mee kunt spelen.

Verder: Waar hoort mijn topic?
PRG >> WEB

[ Voor 140% gewijzigd door RobIII op 20-03-2013 18:27 ]

[Senaxx]

Bedankt voor je antwoord maar waarschijnlijk is het heel duidelijk voor jou, maar voor mij niet helaas. Ik had je code in jsfiddle geprobeerd maar krijg helaas geen output?

Inmiddels ben ik er achter dat de bovenstaande een nested object json array heet toch? En om dit een beetje naar een nette html structuur om te zetten heb ik toch duidelijk iets meer kennis nodig. Maar met bovenstaande kom ik her helaas niet uit.

[NMe]

Console.log voert spul uit naar je console. Firebug, of de console van Chrome. Zo heeft elke browser wel iets. Mocht het met die consoleuitvoer niet duidelijk zijn dan ben ik bang dat je even op zoek moet naar hoe datastructuren werken; niet alleen in JS, maar gewoon in zijn algemeenheid. JSON is niet meer dan de kortst mogelijke notatie voor de structuur van een object en/of array. Vandaar ook de naam JSON.

[RobIII]

Senaxx schreef op woensdag 20 maart 2013 @ 20:42:
Bedankt voor je antwoord maar waarschijnlijk is het heel duidelijk voor jou, maar voor mij niet helaas. Ik had je code in jsfiddle geprobeerd maar krijg helaas geen output?

Dan moet je even kijken naar de console output in Firebug / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools / Opera Dragonfly

[pingwings]

Voor het omzetten van objecten/arrays in javascript naar HTML zou ik altijd aanraden om een templating engine te gebruiken.

Bijvoorbeeld: http://icanhazjs.com/

[Senaxx]

Oke bedankt allen Ik zal eens wat meer er in gaan verdiepen. Zoals bijvoorbeeld hoe datastructuren werken. En RobIII daar had ik wat meer aan inderdaad Bedankt nog voor de tip pingwings

[Senaxx]

Tweakers is geven en nemen, en misschien is het wel zo netjes om even mijn oplossing te posten

PHP:

<?php
    $json = file_get_contents("$array"); 
    $data = json_decode($json, TRUE);
foreach($data['episodes'] as $key=>$getdata){
echo "Episode: ".$key."<br />";
    foreach ($getdata as $value){
        echo "ID: ".$value['id']." ";
        echo "Active: ".$value['active']." ";
        echo "Lang: ".$value['lang']." ";
        echo "Link: ".$value['link']."<BR >";
        }
    }   
 ?>

Nu ziet mijn uiteindelijke code er wel anders uit omdat ik er allemaal php en html omheen heb gemaakt, maar dit was wel mijn uitgangspunt.

[ Voor 13% gewijzigd door Senaxx op 04-04-2013 19:57 ]