JSON을 사용한 jQuery/AJAX 라우팅

Question

안녕하세요 저는 ServerSide 언어 (서버가 지원하지 않음)를 사용할 수 없어 jQuery로 내 웹 사이트의 라우팅을 만들고 있기 때문에 HTML/CSS와 자바 스크립트만으로 간단한 웹 사이트를 만들고 있습니다./AJAX 그리고 심지어 자바 스크립트 지식이 부족하여 가장 많이 만들었습니다. 하지만 내 JSON 파일에서 올바른 색인을 얻는 방법을 찾을 수 없습니다. 내가 좋아하는 내 index.html을에 사용되는 jQuery를

{ 
    "home": { 
     "pattern": "/home", 
     "target": "home.html" 
    }, 
    "webshop": { 
     "pattern": "/webshop", 
     "target": "webshop.html" 
    } 
} 

과 : 다음과 같이

JSON 파일입니다

<script type="text/javascript"> 
$(document).ready(function() { 
//wacht op laden pagina 

$.ajax({ 
    url: 'routing.json', 
    async: false, 
    dataType: 'json', 
    success: function (response) { 
    // do stuff with response. 
    var nav = $('.nav_menu ul'); 

    $.each(response, function(route) { 
     for(var i=0;i<route.length;i++){ 
     console.log("route["+i+"] is =>"+route[i]); 
    } 
     nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>'); 

    }); 

    } 

}); 

}); 
</script> 

이제 문제를 나의 jQuery를 부분 I 돈에 ; t 오른쪽 링크를 만드는 방법을 알고 당신은 자바 스크립트 ARRA 같은 개체를 치료하고

nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>'); 

Answer 1

확실하지 확인하십시오 HTML에서 UL 태그에 동일한 ID를 제공합니다 루프는 $.each()에 for입니다. 꼭 필요한 것은 아닙니다. 대신, 시도해보십시오

$.each(response, function(id,route) { 
    nav.append('<li><a href="index.html/#/' + route.target + '">' + route.pattern + '</a></li>'); 
}); 

Answer 2

을 (경로 참조) 와이. 대신 배열로 작업하지 않으시겠습니까?

[ 
{ "route": "home", "pattern": "/home", "target": "home.html" }, 
{ "route": "webshop", "pattern": "/webshop", "target": "webshop.html" } 
] 

$.each(response, function(i, routeInfo) { 
    nav.append('<li><a href="index.html/#/' + routeInfo.route + '">' + routeInfo.route + '</a></li>'); 
}); 

UPDATE는

사실, Abhilash의 대답은 당신의 구조를 유지합니다. 귀하의 문제는 귀하의 $.each() 서명이 첫 번째 매개 변수가 색인이되고 두 번째가 컬렉션의 항목임을 설명하지 못했기 때문입니다. 나는 목적지의 이름이 아니라 경로의 이름이 필요하다고 생각했기 때문에 그것이 내가했던 방식대로 대답했습니다. 당신이 그것을 필요로하지 않는다면 Abhilash의 대답은 당신의 구조를 유지함에있어 더 좋습니다 (IMHO).

Answer 3

예 JSON

"yyyList": [ 
     { 
      "Id": "1", 
      "Name": "aaaa " 
     }, { 
      "Id": "2", 
      "Name": "bbb " 
     }, { 
      "Id": "6", 
      "Name": "ccc " 
     }, { 
      "Id": "7", 
      "Name": "ddd " 
     } ] 


$.ajax({ 
       url: "URL", 
       //data: "", 
       type: "GET", 
       dataType: 'json', 
       success: function (data) {    
       $.each(data.YYYList, function() { 
        $('#state').append('<'li value='+this.Id+'>'+this.Name+'<'/li>'); 
       }); 
      } 
     }) 

$ ('# 상태') ---> 당신이 더 있는지 왜 올바른 그것은 옵션 구문은

Answer 4

제가 생각하기에 문제는 당신이 그것을 배열과 같은 것으로 취급한다는 것입니다.하지만 사실 그것은 객체입니다. 이것을 시도하십시오 :

$.each(response, function(route) { 
    console.log(response[route]) 
    nav.append('<li><a href="index.html/#/' + response[route].target + '">' + response[route].pattern + '</a></li>'); 
}); 

Answer 5

JSON 응답을 얻으려면 $.parseJSON()을 사용하여 실제 객체로 변환 할 수 있습니다.

같은 시도 :

$.ajax({ 
    url: 'routing.json', 
    async: false, 
    dataType: 'json', 
    success: function (response) { 
    // do stuff with response. 
    var nav = $('.nav_menu ul'); 

    var obj = jQuery.parseJSON(response); 
    for(var ele in obj){ 
     nav.append('<li><a href="index.html/#/' + obj[ele].target + '">' + obj[ele].pattern + '</a></li>'); 
    } 

    } 

});