尝试从JSON加载单词时出错

Error when trying to load words from JSON

本文关键字：单词时 出错 加载 JSON      更新时间：2023-09-26

我遇到了这个问题，我的JSON单词无法加载到我的网页中，图像已经工作了，很偶然。。

我已经有了需要通过JSON加载到我的网页中的图像。我仍然需要一些单词来通过JSON加载到我的网页中

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

在Javascript中，你可以看到我加载的单词有点像图像，据我所知，它应该可以正常工作，但控制台报告

未捕获引用错误：赋值~jquery.min.js:4 中的左侧无效

我似乎不知道问题的根源，更不知道如何彻底解决它。

即使我建议退出Words循环，该错误似乎也存在，如果没有代码调用Words JSON的话，该错误就已经存在了。但现在的问题仍然是我找不到问题的根源，如果我找到了，可能很容易解决。自从上次检查以来，代码在没有Words循环的情况下运行得很好

我发现您还没有定义图像J和单词J

var imagesJ;
var wordsj;

你需要做一些类似的事情

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

最终文件

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);

});

尝试更改此代码：

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

至：

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

我发现问题出在中

 document.getElementById('images') = html;

这是错误的，首先我根本没有调用html，所以我在html的控制台日志后用一个空字符串创建了一个var。

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

变量html2用于单词。

然后我的document.getElementById没有完成（这就是错误）

这是文档的正确代码。

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

然后我有，

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

需要这样，

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

所以我当时的完整代码是

  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);

});

尽管我的浏览器中仍然没有这些单词，但错误已经解决。谢谢大家：D快乐编程！

相关文章：