2012-04-02 3 views
0

이 외부 JSON 파일 (로컬에 저장 됨)을 통해 루프를 만들려고하지만 값과 키를 제대로 읽을 수 없습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?JSON + Jquery. 내가 도대체 ​​뭘 잘못하고있는 겁니까? JSON의 간단한 출력이 작동하지 않습니다.

이것은 나를 미치게 만들고 백만 가지 조합의 마크 업을 시도하고 다른 방법을 시도했지만 동일한 장소에서 계속 끝납니다.

정말 감사드립니다.

또한 코드는 출력하지

JSON 파일 cars.js (로컬 파일)

window.cars = { 

    "compact": [ 

     { "title": "honda", 
      "type": "accord", 
      "thumbnail": "accord_t.jpg", 
      "image": "accord_large.jpg" }, 

     { "title": "volkswagon", 
      "type": "rabbit", 
      "thumbnail": "rabbit_t.jpg",  
      "image": "volkswagon_large.jpg" } 

    ], 

    "trucks": [ 

     { "title": "Ford", 
      "type": "f-150", 
      "thumbnail": "ford_t.jpg", 
      "image": "chevy_large.jpg" }, 

     { "title": "GMC", 
      "type": "silverado", 
      "thumbnail": "gmc_t.jpg", 
      "image": "gmc_large.jpg" } 

    ] 

}; 

HTML 미리

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 

$.ajax ({  

url: 'cars.js',  
type: 'get', 
dataType: 'json', 
error: function(result){ alert('No Dice')}, 
success: function(result){ 

    $('body').append('<div class="main_wrapper"></div><ul>'); 

     $.each(cars.trucks, function(k, v){ 

     $('ul').append('<li class="trucks"><img src="' + v.k[1].thumbnail + '" /> 
       <h1>Title:' + v.k[1].title + ' </h1> 
       <h2>Type: ' + v.k[1].type + '</h2></li>'); 
     }); 

     $.each(cars.compact, function(k, v){ 

     $('ul').append('<li class="compact"><img src="' + v.k[0].thumbnail + '" /> 
       <h1>Title:' + v.k[0].title + ' </h1> 
       <h2>Type: ' + v.k[0].type + '</h2></li>'); 
     }); 

} 

}); 

}); 
</script> 
</head> 
<body> 
</body> 
</html> 

감사한다!

+0

당신은 무엇을 = '텍스트/자바 스크립트'데이터 유형을 시도하는 경우? 어쨌든 나는 당신이 아약스 함수를 오용하고 있다고 말하고 결과는 json이 아닙니다. 서버 로직을 호출하지 않고 js 파일을로드하는 중입니다. –

+0

확인해보십시오. 감사합니다 – GermanMan

+0

작동하지 않습니다. text/javascript에 dataType을 수행하면 json 파일이로드되지 않습니다. js 파일에는 json 데이터가 있습니다. – GermanMan

답변

1

먼저 정적 인 cars.js 파일의 콘텐츠를 반환하도록 웹 서버가 올바르게 구성되어 있는지 확인하십시오. 둘째, 파일에서 "windows.cars ="및 세미콜론을 제거하십시오. 스크립트가 아닌 데이터를로드하고 있으므로 순수 json이어야합니다. 그런 다음, 성공 기능에 결과은 JSON 객체가 될 것이다, 그래서 result.trucks 및 result.compact 속성 (하지 cars.trucks/cars.compact)

UPDATE에 액세스 할 수 있어야합니다 : 추가 읽기 후 을 데이터 유형을 http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings으로 설정하면 dataType을 "json"에서 "script"로 변경하면 코드가 작동하도록해야한다고 생각합니다.

+0

나는 MAMP를 가지고 있고 모든 파일은 htdocs하에있다. 감사합니다. 시도해 보겠습니다. – GermanMan

+0

좋아, 해보겠습니다. 감사! – GermanMan

+0

"window.cars ="및 마지막 세미콜론을 제거하면 .js 파일이로드되지 않습니다. – GermanMan

1

다음 내용은 다음과 같습니다. jsFiddle example

jQuery의 .each()를 for ... 루프의 일반 JavaScript와 혼합 한 것처럼 보입니다. 또한 루프에 문제가 될 수있는 여백이 있습니다.

jQuery를 :

$.each(cars.trucks, function(k, v) { 
    $('ul').append('<li class="trucks"><img src="' + v.thumbnail + '" /><h1>Title:' + v.title + ' </h1><h2>Type: ' + v.type + '</h2></li>'); 
}); 
$.each(cars.compact, function(k, v) { 
    $('ul').append('<li class="compact"><img src="' + v.thumbnail + '" /><h1>Title:' + v.title + ' </h1><h2>Type: ' + v.type + '</h2></li>'); 
});​ 
+0

그래!하지만 파일은 외부 파일이어야합니다. 어떻게하는지에 대한 아이디어가 있습니까? – GermanMan

+0

JSON 파일에 문제가 발생하지 않았습니다. 다른 주석/응답 중 일부는 적절한 JSON 응답을 얻고 있는지를 알려주며이 경우에는 사용자가 있다고 가정합니다.내 대답은 서버가 제대로 보내고 있는지 확인하는 대신 반환 데이터를 조작하는 데 더 중점을 둡니다. – j08691

+0

네, 고마워요. 내가 생각하기에 일이 다가오고있다. – GermanMan

관련 문제