Проблемы с JSON и HTML

У меня в настоящее время возникают проблемы с отображением информации из файла JSON в html. В настоящее время я использую AJAX для получения данных из файла JSON. Основная проблема, с которой я сталкиваюсь, заключается в отображении всех данных в один div.Проблемы с JSON и HTML

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: [ 
     ... 
    ] 
}

Путь выше работает, если я только цикл по одному из четырех массивов, однако сбой хром при попытке сделать выше задача.

Любая помощь будет оценена по достоинству.

Благодаря

источник

2017-01-16 Cheese

Не было бы лучше, если вы могли бы сделать файл JSON как это: '{ 0: {эпизод: "Episode1", образом: "image_of_episode_1.png", ссылка:«HTTP: // LINK1 .com ", название:" title ep.1 "} 1: {episode:" episode2 ", image:" image_of_episode_2.png ", ссылка:" http://link2.com ", название:" название ep .2 "}' Таким образом, вы можете перебирать эпизоды с помощью одного цикла. Я помню, я использовал функцию php, которая меняет порядок массива, но я даже не знаю, какой язык сервера вы используете для создания этого json-массива, поэтому я не знаю, будет ли это полезно или нет. –

Также я думаю текущий цикл ошибочен, потому что вы делаете как декартово произведение всех элементов аниме. Если вы не можете изменить порядок json-массива, как я сказал в предыдущем комментарии, вы должны получить длину внутреннего массива (например, «заголовки»), а затем значение цикла и целого e получить все элементы с этим индексом –

Вы пытались использовать 'map', а не много для циклов? Вы можете легко преобразовать эту структуру в массив, а затем отобразить ее. Вы можете сделать это: 'Object.keys (jsonObject) .map()', а затем работать оттуда. – groooves

я решил взять другой подход отходя от 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); 


     }); 
    }); 
}

источник

2017-01-16 10:18:09 Cheese

Проблемы с JSON и HTML

ответ

Смежные вопросы