JSON + javascript

[kongen]

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

{"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

// 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(i = 0; i<obj.length; i++) {
    "<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

<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

<p id="intro">
Film: MacGyver<br>
Kategori: Action<br>
Premiere: 2015-12-31 14:30:00
</p>

 

[adeneo]

Litt usikker, men det finnes ikke noe file_get_contents i JS, det er en PHP funksjon ?

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

 

[kongen]

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?

 

[adeneo]

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

for(i = 0; i<obj.length; i++) {
    "<option value=\"" + i + "\">" + obj.tittel + "</option>";
}

for å holde riktig orden på arrayet

 

[kongen]

Det fikser det, takk

 

[kongen]

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

<?php
    $filmer = file_get_contents('filmer.txt');
?>

<script>
   var obj = <?php echo $filmer ?>;
</script>

ala noe slikt

<script>
   var obj = require('http://www.domene.com/filmer.json');
</script>

på en måte som fungerer?