jQuery로 JSON의 키와 값으로 채워진 UL 생성하기

Question

내가 가진 것은 이것이다.

html로

<div id="catcher"></div> 

JQuery와

jQuery.ajax({ 
    url:'./ajax.html', 
    async: true, 
    success: function(response){ 
    for (var key in response){ 
     jQuery('#catcher') 
     .append("<ul>"+ key +"<li>" + response[key].toString() + "</li></ul>"); 
    } 
    } 
}) 

나는이

같은 UL을하고 싶습니다

{ 
    "Item":"Item Name", 
    "Item 1":"Item Name", 
    "Item 2":"Item Name", 
    "Item 3":"Item Name", 
    "Item 4":"Item Name" 
} 

것처럼 JSON 본다
1. 항목
   • 항목 이름
2. 항목 1
   • 항목 이름

등등. 지금 내가 얻는 것은 개체 값의 각 문자와 키의 숫자입니다. 대신 나는 그들 모두가 현과 동등하기를 원합니다.

Answer 1

아래 코드를 시도하십시오. 아래 코드 샘플은 json 속성 만 반복하는 데 사용됩니다.

$ .each (응답 함수 (키 값) + {

경보 (키 ""+ 값)

});

Answer 2

jQuery.ajax({ 
     url: './ajax.html', 
     async: true, 
     success: function(response) { 
     var ol = "<ol>"; 
     for (var key in response) { 
      ol += "<li>" + key + "<ul><li>" + response[key] + "</li></ul>" + "</li>"; 
     } 
     ol += "<ol>"; 
     jQuery('#catcher').append(ol); 
     } 
    }); 

Answer 3

외부 주문 목록이 누락되었습니다. 당신이 첫 번째를 추가하고 루프 APPEND를 변경하는 경우가하는 중첩 <ul> 당신은 당신이 찾고있는 구조를 얻어야한다 :

var data = { 
 
    "Item": "Item Name", 
 
    "Item 1": "Item Name", 
 
    "Item 2": "Item Name", 
 
    "Item 3": "Item Name", 
 
    "Item 4": "Item Name" 
 
} 
 

 
$('#catcher').append('<ol></ol>'); 
 

 
for (var key in data) { 
 
    $('#catcher ol').append('<li>' + key + '<ul><li>' + data[key] + '</li></ul></li>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="catcher"></div>

Answer 4

당신은 당신의 성공 콜백에 console.log(response)를 추가하려고합니다. response은 개체가 아닌 문자열임을 보여줍니다. how to parse json data with jquery/javascript?

Answer 5

이 코드를 사용해보십시오 : 여기에 설명 된대로 jQuery.ajax(...) 전화에 dataType:'json'을 추가 할 수 있습니다이 경우

. 도움이되는지 확인하십시오 :

jQuery.ajax({url:'./ajax.html', async: true, success: function(response){ 

         var addcode=" "; 
         var i=1; 

         $.each(response, function(key,value) { 

           addcode += '<ul>' + (i++) + '. ' + key; 
           addcode += '<li>' + value + '</li>'; 
           addcode += '</ul>'; 

         }); 
         jQuery('#catcher').html(addcode); 
    }})