2012-04-02 16 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

あなたはデータ型= 'テキスト/ JavaScriptを' しようとしたらどう?いずれにしても、あなたはAjax関数を誤って使用していると言えます。その結果はjsonではありません。任意のサーバロジックを呼び出すのではなく、jsファイルをロードするだけです。 –

+0

ok、それを試してみてください。ありがとうございます – GermanMan

+0

働いていません。 dataTypeをtext/javascriptにするとjsonファイルはロードされません。 jsファイルにはjsonデータがあります。 – GermanMan

答えて

1

まず、静的なcars.jsファイルの内容を返すように、Webサーバーが正しく構成されていることを確認します。次に、ファイルから "windows.cars ="とセミコロンを削除します。あなたはスクリプトではなくデータをロードしているので、純粋なjsonでなければなりません。さらに読みになった後 :次に、成功の機能に結果は、あなたのJSONオブジェクトになりますので、result.trucksとresult.compactプロパティにアクセスすることができるはずです(ない cars.trucks/cars.compact)

UPDATE on dataTypeを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()を通常のJavaScript for ... inループと混合しているようです。また、あなたのループに問題があったかもしれない空白がありました。

の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

関連する問題