jQuery .each метод, возвращающий последнее значение

Question

Я чувствую, что метод .each() на самом деле не работает. Вот мой код:

function makeHTML(data) { 
console.info(data.categories); 

$(data).each(function() { 
    let createButton = ` 
       <div class="col-md-6"> 
        <button type="button" class="btn btn-default"> 
         <a href="${data.categories.category.id}" 
         target="_blank">${data.categories.category.title}</a> 
        </button> 
       </div> 
       `; 
    document.getElementById('table').innerHTML = createButton; 
}); 
} 

$(document).ready(function() { 
$.ajax({ 
    type: 'GET', 
    contentType: "application/json; charset=utf-8", 
    url: "json/data.json", 
    dataType: "json", 
    success: makeHTML, 
    error: function (result) { 
     console.error(result); 
    } 
}); 
}); 

Это возвращает только последний набор в формате JSON, который выглядит следующим образом:

{ 
    "categories": { 
    "category": { 
     "title": "Something", 
     "id": 1 
    }, 
    "category": { 
     "title": "Something Else", 
     "id": 2 
    } 
    } 
} 

Я попытался добавить отладчик; сразу после innerHTML = createButton; для просмотра цикла, но он входит в jQuery только один раз. Это странно. Я не знаю, что я делаю неправильно?

Answer 1

Если вы измените его на:

{ 
    "categories": { 
    "category1": { 
     "title": "Something", 
     "id": 1 
    }, 
    "category2": { 
     "title": "Something Else", 
     "id": 2 
    } 
    } 
} 

Ваш код будет распознавать как объекты, так что вы не можете складывать их так. JSON перезаписывает свои атрибуты и видит только одну версию. Вам необходимо изменить его на массив .

Вход с поджигатель:

Объект {category1 = {...}, category2 = {...}}

Вы должны изменить функцию:

function makeHTML(data) { 
console.info(data.categories); 

$(data.categories).each(function (index, data2) { 
    var createButton = ` 
       <div class="col-md-6"> 
        <button type="button" class="btn btn-default"> 
         <a href="${data2.id}" 
         target="_blank">${data2.title}</a> 
        </button> 
       </div> 
       `; 
    document.getElementById('table').innerHTML += createButton;//add not set 
}); 
} 

$(document).ready(function() { 
$.ajax({ 
    type: 'GET', 
    contentType: "application/json; charset=utf-8", 
    url: "json/data.json", 
    dataType: "json", 
    success: makeHTML, 
    error: function (result) { 
     console.error(result); 
    } 
}); 
}); 

И данные к

{ 
    "categories": [ 
    { 
     "title": "Something", 
     "id": 1 
    }, 
    { 
     "title": "Something Else", 
     "id": 2 
    } 
    ] 
} 

Answer 2

Я думаю, вы должны изменить строку на что-то вроде этого:.

$(data.categories).each(function (key, value) { 
    console.log("title", value.title); 
}); 

Answer 3

вы положили document.getElementById ('стол') innerHTML = CreateButton; в каждом цикле, таким образом, вы пишете n раз в таблице, и каждый раз, когда вы ставите только последний «createButton» , я предлагаю вам инициализировать вашу переменную до вашего цикла each(), а затем конкатрировать каждый ответ с каждой итерации и только в конце вставьте ваши данные в innerHTML.

Answer 4

Проблема в том, что вы используете неправильный формат JSON. Вы дублируете ключи, и имена должны быть уникальными. Это должно работать

{ 
     "categories":[ 
      { 
      "title":"Something", 
      "id":1 
      }, 
      { 
      "title":"Something Else", 
      "id":2 
      } 
     ] 
    } 

Другое дело, что вы пытаетесь добавить элементы div на таблицу, таблица должна содержать строки и столбцы. Так что, если я понимаю ваш вопрос, это путь ваш, как добавить ваши JSON элементов в таблице: HTML:

<table id='table'> 

</table> 

переменные сценария: код

var categoriesJson = [ 
      { 
      "title":"Something", 
      "id":0 
      }, 
      { 
      "title":"Something Else", 
      "id":1 
      } 
     ] 
var result = ''; 

сценарий:

$(document).ready(function(){ 

      $.each(categoriesJson, function (i, item) { 
        result += "<tr><td><button id='"+item.id+"'>" + item.title + "</button></tr></td>" 

       $('#table').append(result); 
      }); 


     });