Question

我遇到这个问题，我的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中你可以看到我加载的字样有点像图像，据我所知它应该可以工作，但控制台报告

未捕获的ReferenceError：赋值中的左侧无效~jquery.min.js：4

我似乎无法找出问题的根源，我知道怎么解决它的问题。

即使我推荐 Words循环，似乎错误仍然存在，错误已经存在而没有代码调用单词JSON 。但现在问题仍然是我无法找到问题的根源，如果我发现它，它可能很容易解决。自上次检查以来，代码运行完美，没有 Words Loop

Answer 1

我看到你没有定义imagesJ和wordsJ

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


});

Answer 2

尝试更改此代码：

function func1(vl){
 // do something
}

function func2(vl){
 // do something
}

function func3(vl){
 // do something
}

function func4(vl){
 // do something
}

func1('Js');
func2('Css');
func3('Img');
func4('Fonts');

为：

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

Answer 3

我发现问题出在

 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 = '';

var 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快乐编程！

尝试从JSON加载单词时出错

3 个答案: