JSON + javascript

En tråd i 'Javascript/Ajax' startet av kongen, 27 Feb 2015.

  1. kongen

    kongen kongemedlem

    Innlegg:
    2.728
    Jeg vil lage en dropdown-meny-liste med filmer, men i stedet for å bruke xml slik som dette

    http://www.w3schools.com/php/php_ajax_xml.asp

    så vil jeg bruke json

    http://www.w3schools.com/json/json_intro.asp

    Jeg har en fil med filmer i json-format

    PHP:
    {"filmer":[
    {
    "id":"1",
    "film":"Rambo",
    "premiere":"2015-05-17 14:30:00",
    "kategori":"action"
    },
    {
    "id":"2",
    "film":"Rocky",
    "premiere":"2015-06-21 14:30:00",
    "kategori":"action"
    },
    {
    "id":"3",
    "film":"MacGyver",
    "premiere":"2015-12-31 14:30:00",
    "kategori":"action"
    },
    {
    "id":"4",
    "film":"A-Team",
    "premiere":"2016-05-17 14:30:00",
    "kategori":"action"
    },
    {
    "id":"5",
    "film":"Donald Duck",
    "premiere":"2015-12-24 11:00:00",
    "kategori":"tegnefilm"
    },
    {
    "id":"6",
    "film":"Mikke Mus",
    "premiere":"2016-12-24 10:30:00",
    "kategori":"tegnefilm"
    }
    ]}
    så har jeg disse javascript-kodene for å velge og vise info om filmene


    PHP:
    // hente filmer fra fil
    $filmer file_get_contents('filmer.txt');

    // dropdown meny
    <select id="filmer" onchange="showFilm(this.value)"></select>

    // putte ting i dropdownmeny
    <script>
    var 
    obj JSON.parse($filmer);
    var 
    out "";
    var 
    i;
    for(
    0i<obj.lengthi++) {
        
    "<option value=\"" obj.id "\">" obj.tittel "</option>";
    }
    document.getElementById("filmer").innerText out;
    </script>

    // sånn p for å vise info om valgt film
    <p id="intro"></p>

    // putte ting i p'en
    <script>
    function showFilm(id) {
    if (id=="") {
    document.getElementById("intro").innerHTML="";
    return;
    } else {
    document.getElementById("intro").innerText =
    "Film:" + obj.tittel + "<br>" +
    "Kategori:" + obj.kategori + "<br>" +
    "Premiere:" + obj.premiere;
    }
    }
    men ingenting vil vises. Hvordan kan jeg få dropdownmenyen til å bli

    PHP:
    <select id="filmer">
      <
    option value="1">Rambo</option>
      <
    option value="2">Rocky</option>
      <
    option value="3">MacGyver</option>
      <
    option value="4">A-Team</option>
      <
    option value="5">Donald Duck</option>
      <
    option value="6">Mikke Mus</option>
    </
    select>
    og p'en til å vise dette når f.eks. MacGyver velges fra dropdownmenyen

    PHP:
    <p id="intro">
    FilmMacGyver<br>
    KategoriAction<br>
    Premiere2015-12-31 14:30:00
    </p>
     
  2. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    Litt usikker, men det finnes ikke noe file_get_contents i JS, det er en PHP funksjon ?
    PHP:
    <?php
        $filmer 
    file_get_contents('filmer.txt');
    ?>

    <script>
       var obj = <?php echo $filmer ?>;
    Du trenger altså ikke å parse JSON, det blir automatisk gyldig javascript, og det ser ikke ut som du har noe obj.tittel men obj.film ?

    Og når du legger til HTML, bruk innerHTML, ikke innerText
     
  3. kongen

    kongen kongemedlem

    Innlegg:
    2.728
    Da har jeg fått til det meste, unntatt en ting.

    Når ting puttes inn i listemenyen så blir id'en fra json brukt. Når det velges en film, eks med id 2 som er Rocky, så vises MacGyver i p'en. p'en henter det tredje "objektet" fra json istedet for å hente "objektet" med id 2.

    Hvordan kan jeg matche id fra listemeny til id i json i showFilm funksjonen?
     
  4. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    Det blir litt gjetting, men det første objektet i arrayet ditt har ID "1", men array er "zero-based", slik at skal du hente ut det objektet så blir det obj[0] ikke obj[1], som derimot blir det andre objektet.

    Altså når du bruker verdien fra dropdown'en så er "2" egentlig det tredje objektet i arrayet ettersom "0" er det første.

    Vanligvis ville man nok gjort noe sånt i stedet

    PHP:
    for(0i<obj.lengthi++) {
        
    "<option value=\"" "\">" obj.tittel "</option>";
    }
    for å holde riktig orden på arrayet
     
    kongen og Tonny Kluften liker dette.
  5. kongen

    kongen kongemedlem

    Innlegg:
    2.728
    Det fikser det, takk :)
     
  6. kongen

    kongen kongemedlem

    Innlegg:
    2.728
    Er det mulig å hente denne filen rett inn i javascript uten bruk av php?

    Kode:
    <?php
        $filmer = file_get_contents('filmer.txt');
    ?>
    
    <script>
       var obj = <?php echo $filmer ?>;
    </script>
    
    ala noe slikt

    Kode:
    <script>
       var obj = require('http://www.domene.com/filmer.json');
    </script>
    
    på en måte som fungerer?
     

Del denne siden