Mangler hjælp til opgave i JavaScript

Vi skal ikke lave dine lektier for dig, og det kunne lyde som om din basale javascript-viden måske ikke er så høj.

Ikke desto mindre vil jeg gerne give et par fifs med på vejen.

Først og fremmest, for at åbne filer i javascript skal de være tilgængelige via web, dvs du skal kunne indtaste en url til dem og se dem. Det kan du så gøre på kode-niveau i Javascript med et AJAX*-kald. Mere specifikt skal du have fat i et xmlhttprequest objekt i Javascript. På MDN kan du læse lidt om, hvordan man gør det:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Prøv eventuelt at lave nogle simple tests af at lave AJAX-kald til flade .txt filer og udskriv deres indhold med fx alert()-funktionen.

Når du har det på plads skal du have dataene konverteret fra rå json-text til javascript-objekter. Nogle browsere har en indbygget JSON.parse metode du kan bruge: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse -- hvis din browser ikke har denne funktion kan du finde JSON-librariet her og include det i din html før din øvrige javascrip: https://github.com/douglascrockford/JSON-js

Derefter skal du have styr på at traverse dataene du får fra json-filen. Det gør du som et hvert andet javascript-objekt, fx:

for(var i in tracks) {
  alert(tracks[i].artist);
}

hvis altså din json har dén struktur.

Prøv eventuelt at lave nogle simple tests med nogle javascript-objekter du selv definerer direkte i koden:

var tracks = [
  { artist: 'Black Sabbath', song: 'Iron Man' },
  { artist: 'Metallica', song: 'Enter Sandman' }
];

Når du har det på plads skal du bygge html op ud fra de data der er i json'en. Som begynder vil jeg nok anbefale at du bruger .innerHTML metoden til at lægge html ind i andre elementer, fx dit bodytag eller et en container, som du kan hente via document.querySelector og document.querySelectorAll: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

Derved vil du kunne bygge en afspilningsliste. Så er det "bare" et spørgsmål om at lave nogle eventlisteners på click-bare frem og tilbage knapper, der markerer det næste track i listen du har bygget. Det kan du gøre med addEventListener() metoden på de fleste elementer: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Vær opmærksom på at i mange af disse tilfælde er det ikke alle browsere, disse funktioner fungerer på. Med fx jQuery er der taget højde for det og lavet abstraktionslag over, der udligner forskellene på browserne, men det er fornuftigt nok at starte med at lære det reelle, underliggende Javascript. Jeg forestiller mig, at det ikke er et krav at løsningen skal fungere på alle, navnligt ældre, browsere.

God arbejdslyst!

*="Asynchronous Javascript And XML", selvom XML-delen ikke bliver brugt så meget mere efter JSON er blevet populært.

No worries mate. At stemme på svaret er nok til at godkende det og give karma, så der er ikke mere du skal spekulere på der.

Jeg har redigeret svaret for at tilføje en note om hvordan du så behandler JSON-dataene og får dem lavet om til native Javascript objekter.

Wow tusind tak for tiden og hjælpen Det var præcist sådan et svar jeg ledte efter. Ikke fordi jeg ville få folk til at besvare mine opgaver, men blot for at forstå hvad det gik ud på. Skal jeg bare stemme dit svar op eller kan jeg give dig karma på andre måder? Er ny her..
Igen. Tak

Hvis du rigtigt vil score points så anvender du AngularJS ... Det er avanceret men hoold nu kæft det er sejt

Okay nu har jeg fået min liste til at virke med JSON-filen, men mangler "bare" afspilningslisten. Jeg har lavet en rimelig ringe søgefunktion og den mangler at blive gjort færdig, men det jeg har ser sådan ud: http://omai.dk/Venners%20kode/Nikolaj%20Jenning%20Hansen/
Men nu forestiller jeg mig at jeg skal gøre sådan at jeg kan trykke på nogle cd'er/tracks, som vil åbne en "musikafspiller", hvor jeg kan tilføje/rydde sange og shuffle osv. Men jeg har ingen anelse om, hvordan jeg gør dette. nogle forslag?