Question

我目前在将JSON文件中的信息显示为html时遇到了一些麻烦。我目前正在使用AJAX从JSON文件中获取数据。我面临的主要问题是将所有数据显示在一个div中。

    function Test(){
  request.open('GET','/json/anime.json');
  request.onreadystatechange = function() {
    if((request.readyState===4) && (request.status===200)) {
      var json = JSON.parse(request.responseText);
      for(var title in json.Title ) {
        for(var ep in json.Episode) {
          for(var img in json.Image) {
            for(var link in json.Link) {
              _title = json.Image[title];
              episode = json.Image[ep];
              image = json.Image[img];
              _link = json.Image[link];
              var div = document.createElement('div');
              div.className = 'card card-inverse';
              div.innerHTML = `<a href="${_link}"><img class="card-img img-fluid img-responsive" src="${image}" data-toggle="modal"></a>`;
              document.getElementById('anime').appendChild(div);
            }
          }
        }
      }
    }
  }
  request.send();
}

JSON文件看起来像这样......

{
    Episode: [
        ...    
    ],
    Image: [
        ...
    ],
    Link: [
        ...
    ],
    Title: [
        ...
    ]
}

如果我只是循环遍历四个阵列中的一个，上面的方法是有效的，但是在尝试执行上述任务时会崩溃chrome。

任何帮助都将不胜感激。

由于

Answer 1

我决定采取一种不同的方法，远离ajax，稍微向jquery移动。以下是我迄今为止所做的工作。感谢上面评论的人，真的帮助我想办法解决它。

function DisplayCards() {
  var i = 0;
  $.getJSON('/json/anime.json', function(data) {
      $.each(data, function(index) {
        for(key in data[index]){
          e = data.Image.length;
          console.log(e);
          if(i < e)
          {
            image = data.Image[key];
            link = data.Link[key];

            console.log(i += 1);
            var div = document.createElement('div');
            div.className = 'card card-inverse';
            div.innerHTML = `<a href="${link}"><img class="card-img img-fluid img-responsive" src="${image}" data-toggle="modal"></a>`;
            var p = document.createElement('p');
            p.innerHTML = 'id="wrapper" class="text"';
            document.getElementById('anime').appendChild(div);
          }
        }
        console.log(data);


      });
  });
}

JSON和HTML问题

1 个答案: