2016-03-29 9 views
0

Ich habe dieses Problem, wo meine Worte von JSON nicht in meine Webseite laden, die Bilder bereits funktionieren, fortunally ..Fehler bei dem Versuch, Worte von JSON zu laden

Ich habe bereits die Bilder, die sein mußten geladen durch JSON in meine Webseite. Ich brauche noch ein paar Worte Trog JSON in meine Webseite zu laden,

{"main_object": { 
    "imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"], 
    "wordsJ": ["næb", "kat", "æg", "mel", "mælk", "pas", "ske", "te"] 
} 
} 

var jsonData = "noJson"; 
 
var hr = new XMLHttpRequest(); 
 

 
$(document).ready(function(){ 
 
var jsonData = 'empty'; 
 
    $.ajax({ 
 
    async: false, 
 
    url: "./js/data.json", 
 
    dataType: 'html', 
 
     success: function(response){ 
 
     jsonData = JSON.parse(response); 
 

 
     console.log('ok'); 
 
      imagesJ = jsonData.main_object.imagesJ; 
 
      wordsJ = jsonData.main_object.wordsJ; 
 

 
      for(i = 0; i < imagesJ.length; i++) { 
 
      images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">'; 
 
      } 
 
      document.getElementById('images') = html; 
 

 
      for (i = 0; i < wordsJ.length; i++) { 
 
       wordsJ.innerHTML += '<span>' + wordsJ[i] + '</span>'; 
 
      } 
 
      document.getElementById('words') = html; 
 

 
     }, 
 
     error: function(){ 
 
     console.log('JSON could not be loaded.'); 
 
     } 
 
    }); 
 
     console.log(jsonData); 
 

 

 
});
header { 
 
    height: 5%; 
 
} 
 

 
body { 
 
    background-color: #f0f0f0; 
 
} 
 
.container { 
 
    height: 90%; 
 
} 
 
.images img { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
footer{ 
 
    height: 5%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Sleepopdracht</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="css/css.css"> 
 
</head> 
 
<body> 
 
    <header> 
 

 
    </header> 
 

 
    <div class="container" id="container"><div class="images" id="images"></div> 
 
              <div class="words" id="words"></div> 
 
    </div> 
 

 

 
    <footer> 
 
    </footer> 
 
    <script type="text/javascript" src="js/javascript.js"></script> 
 
</body> 
 
</html>

Im Javascript können Sie sehen, dass ich die Worte ein wenig wie die Bilder, so weit geladen, wie ich weiß, es sollte nur funktionieren, aber die Konsole meldet einen

Uncaught ReferenceError: Invalid left-hand side in assignment ~ jquery.min.js:4

ich kann nicht te Quelle des Problems scheinen, um herauszufinden, wiehern Ich weiß, wie ich es vollständig lösen kann.

Es scheint, dass der Fehler existiert, auch wenn ich die Wörter Schleife lobe aus, der Fehler gab es schon ohne den Code Aufruf der Wörter JSON. Aber jetzt ist das Problem immer noch, dass ich die Ursache des Problems nicht finden kann, wenn ich es gefunden habe, ist es wahrscheinlich leicht zu lösen. Seit ich das letzte Mal überprüft, lief der Code perfekt ohne die Wörter Loop-

+0

['innerHTML'] (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) ist eine Eigenschaft von DOM [element] (https: //developer.mozilla. org/de-DE/docs/Web/API/Element). Sie können ** nicht ** mit Strings wie zB 'imagesJ',' wordsJ' verwenden. – hindmost

+0

Aber es funktioniert ganz gut mit den Bildern .. Wie kann das sein .. (Ich habe noch so viel zu lernen) –

+0

Du benutzt 'images.innerHtml' und dort' images' können ein dom-Element sein, aber 'WordsJ' ist eine Objekteigenschaft –

Antwort

0

Ich sehe, dass Sie imagesJ und wordsJ definiert havn't

var imagesJ; 
var wordsj; 

Und brauchen Sie so etwas wie dieses

zu tun
var word = document.getElementById('words'); 
    var html = ''; 
    for (i = 0; i < wordsJ.length; i++) { 
     html += '<span>' + wordsJ[i] + '</span>'; 
    } 
    word.innerHTML = html; 

Schluss Datei

var jsonData = "noJson"; 
var hr = new XMLHttpRequest(); 
var imagesJ; 
var wordsj; 

$(document).ready(function(){ 
var jsonData = 'empty'; 
    $.ajax({ 
    async: false, 
    url: "./js/data.json", 
    dataType: 'html', 
     success: function(response){ 
     jsonData = JSON.parse(response); 

     console.log('ok'); 
      imagesJ = jsonData.main_object.imagesJ; 
      wordsJ = jsonData.main_object.wordsJ; 

      for(i = 0; i < imagesJ.length; i++) { 
      images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">'; 
      } 
      document.getElementById('images') = html; 

     var word = document.getElementById('words'); 
     var html = ''; 
     for (i = 0; i < wordsJ.length; i++) { 
      html += '<span>' + wordsJ[i] + '</span>'; 
     } 
     word.innerHTML = html; 
     }, 
     error: function(){ 
     console.log('JSON could not be loaded.'); 
     } 
    }); 
     console.log(jsonData); 


}); 
+0

Ich habe versucht, dies zu verwenden Aber es zeigt einen weiteren Fehler, und nichts wird mehr auftauchen. Bist du sicher, dass das richtig ist? –

+0

Ist es immer noch ein Fehler von ~ jquery.min.js: 4? –

+0

Ja es ist immer noch der selbe Fehler, ich habe auch die andere Antwort ausprobiert, und im Kommentarbereich scheint nichts zu funktionieren .. wie üblich mit meinen Codes xD .. –

0

Try c Hängen Sie diesen Code:

 for (i = 0; i < wordsJ.length; i++) { 
      wordsJ.innerHTML += '<span>' + wordsJ[i] + '</span>'; 
     } 
     document.getElementById('words') = html; 

zu:

var words = document.getElementById('words') 
for (i = 0; i < wordsJ.length; i++) { 
    words.innerHTML += '<span>' + wordsJ[i] + '</span>'; 
} 
0

fand ich, dass das Problem in

war
document.getElementById('images') = html; 

dies falsch war, zuerst habe ich nicht nennen html überhaupt so machte ich ein var nach dem Konsolenprotokoll von html mit einer leeren Zeichenfolge.

 console.log('ok'); 
     var imagesJ = jsonData.main_object.imagesJ; 
     var wordsJ = jsonData.main_object.wordsJ; 
     var html = ''; 
     var html2 = ''; 

Die var html2 ist für die Wörter.

dann meine document.getElementById nicht abgeschlossen wurde (das war der Fehler)

Dies ist der richtige Code für das Dokument war.

document.getElementById('images').innerHTML = html;

Dann hatte ich,

images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';

weicht notwendig, um dies zu sein,

html += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">';

Also mein vollständiger Code dann war,

var jsonData = "noJson"; 
    var hr = new XMLHttpRequest(); 

    $(document).ready(function(){ 
    var jsonData = 'empty'; 
    $.ajax({ 
    async: false, 
    url: "./js/data.json", 
    dataType: 'html', 
    success: function(response){ 
    jsonData = JSON.parse(response); 

    console.log('ok'); 
     var imagesJ = jsonData.main_object.imagesJ; 
     var wordsJ = jsonData.main_object.wordsJ; 
     var html = ''; 
     var html2 = ''; 

     for(i = 0; i < imagesJ.length; i++) { 
     html += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">'; 
     //images.innerHTML += '<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">'; 
     } 
     document.getElementById('images').innerHTML = html; 
     //$('#images').append(html); 


     for (i = 0; i < wordsJ.length; i++) { 
      words.innerHTML += '<span>'+wordsJ[i]+'</span>'; 
     } 
     document.getElementById('words').innerHTML = html2; 

    }, 
    error: function(){ 
     console.log('JSON could not be loaded.'); 
    } 
    }); 
     console.log(jsonData); 


}); 

Obwohl ich immer noch nicht die Wörter in meinem Browser habe, ist der Fehler behoben. Danke an alle: D Fröhliches Programmieren!

Verwandte Themen