jQuery. 마지막 값을 반환하는 각 메서드

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를 한번만 사용한다. 이상해. 내가 뭘 잘못하고 있는지 모르겠다. 당신이 그런 식으로 그들을 적재 할 수 있도록, 두 개체를 인식

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

귀하의 코드 : 당신이 그것을 변경하는 경우

Answer 1

. JSON은 속성을 덮어 쓰고 하나의 버전 만 봅니다. 배열으로 변경해야합니다. 불을 지르고에서

로그 :

오브젝트 {분류 1 = {...}, 구분 2 = {...}} 당신이 기능을 변경해야합니다

:

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


     });