up vote 0 down vote favorite

Hi I am trying to parse a JSON array of Objeckts into a JS array but it doesnt work.Does someone know what I have done wrong?

 listOfBirds = document.querySelector("bird-list");
 var obj = JSON.parse(listOfBirds);
      console.log(obj);
 <script type="text/template" id="bird-list">
        [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" }]
    </script>

share|improve this question
    
try to debug the code. listOfBirds is null i guess. – Roland Starke yesterday
    
To get an element by it's ID you need to use the #-sign with querySelector – Luca yesterday
    
yea its null. Normally should work without # – Ar Tan 23 hours ago
    
Luca Danke dir! Das # war das Problem. Hätte nicht gedacht :) – Ar Tan 20 hours ago
up vote 2 down vote

You could use document.getElementById with the innerHTML property.

var listOfBirds = document.getElementById("bird-list").innerHTML,
    obj = JSON.parse(listOfBirds);

console.log(obj);
<ul class="bird-list">
    <script type="text/template" id="bird-list">
        [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" },{ "id":5,"name":"Blaumeise", "latinName":"Cyanistes caerruleus", "imagePath":"resources/images/blaumeise.png", "audioPath":"resources/data/audio/blaumeise.ogg" },{ "id":6, "name":"Elster", "latinName":"Pica pica", "imagePath":"resources/images/elster.png", "audioPath":"resources/data/audio/elster.ogg" },{ "id":7, "name":"Grünfink", "latinName":"Chloris chloris", "imagePath":"resources/images/gruenfink.png", "audioPath":"resources/data/audio/gruenfink.ogg" },{ "id":8, "name":"Mehlschwalbe", "latinName":"Delichon urbicum", "imagePath":"resources/images/mehlschwalbe.png", "audioPath":"resources/data/audio/mehlschwalbe.ogg" },{ "id":9, "name":"Mauersegler", "latinName":"Apus apus", "imagePath":"resources/images/mauersegler.png", "audioPath":"resources/data/audio/mauersegler.ogg" },{ "id":10, "name":"Buchfink", "latinName":"Fringilla coelebs", "imagePath":"resources/images/buchfink.png", "audioPath":"resources/data/audio/buchfink.ogg" },{ "id":11, "name":"Ringeltaube", "latinName":"Columba palumbus", "imagePath":"resources/images/ringeltaube.png", "audioPath":"resources/data/audio/ringeltaube.ogg" },{ "id":12, "name":"Feldsperling", "latinName":"Passer montanus", "imagePath":"resources/images/feldsperling.png", "audioPath":"resources/data/audio/feldsperling.ogg" },{ "id":13, "name":"Türkentaube", "latinName":"Streptopelia decaocto", "imagePath":"resources/images/tuerkentaube.png", "audioPath":"resources/data/audio/tuerkentaube.ogg" },{ "id":14, "name":"Rauchschwalbe", "latinName":"Hirundo rustica", "imagePath":"resources/images/rauchschwalbe.png", "audioPath":"resources/data/audio/rauchschwalbe.ogg" },{ "id":15, "name":"Rotkehlchen", "latinName":"Erithacus rubecula", "imagePath":"resources/images/rotkehlchen.png", "audioPath":"resources/data/audio/rotkehlchen.ogg"}]
    </script>
</ul>

share|improve this answer
    
I have tried like that but it comes like : Uncaught TypeError: Cannot read property 'innerHTML' of null – Ar Tan 23 hours ago
    
@ArTan, which browser are you using? – Nina Scholz 23 hours ago
    
I am using the brackets und the Live ( its the chrome, Nodejs (I think so)) – Ar Tan 23 hours ago
    
it should work with chrome. – Nina Scholz 23 hours ago
    
It does not. There is on Html a : <ul class="bird-list"> </ul> befor the script. Could it be that a Problem? Even that is a class and not an id. – Ar Tan 22 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.