weixin_33690963 2017-01-16 08:04 采纳率: 0%
浏览 28

JSON和HTML的麻烦

i'm currently having some troubles with displaying the information from a JSON file to html. I'm currently using AJAX to get the data from the JSON file. The main problem that i'm facing is with displaying all the data into one 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();
}

The JSON file looks like this...

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

The way above is working if i'm only looping over one of the four arrays, however crashes chrome when trying to do the above task.

Any help would be appreciated.

Thanks

  • 写回答

1条回答 默认 最新

  • weixin_33737774 2017-01-16 10:18
    关注

    I decided to take a different approach moving away from ajax a little and moving more towards jquery. Below is what has so far worked out for me. Thanks to the people who commented above, really helped me think of ways to tackling it.

    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);
    
    
          });
      });
    }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 关于#wireshark#的问题:并且能够给数据做标注,如这个流量是在看视频或者是在转账
  • ¥90 请问,这个视频播放软件的名称,用过的朋友请给答案,上方..avi是啥意思?是看短剧还是播放本地视频?
  • ¥15 运筹优化,gurobi,python
  • ¥15 基于python的电影系统推荐
  • ¥20 springmvc重定向和返回json
  • ¥15 数学建模——参会安排怎么做
  • ¥15 电脑键盘实现触摸功能
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格