jQuery で JSON を参照して読み取る - for と $.each

jQuery の簡単な例を見て、JavaScript オブジェクトの配列を参照してみましょう。

var json = [
{"id":"1","text":"paris"},
{"id":"2","text":"マルセイユ"},
{"id":"3","text":"リール"},
{"id":"4","text":"メス"},
{"id":"5","text":"renne"}
];

$.each(json, function(i, obj) {
alert(obj.text);
});
この例の実行は正しく実行され、市区町村が警告ボックスに表示されます。シングルクォートまたはダブルクォートで文字列 JSON を宣言する場合の一般的な問題.

var json = '[{"id":"1","city":"paris"},{"id":"2","city":"marseille"},
{"id":"3","city":"lille"},{"id":"4","city":"metz"},
{"id":"5","city":"トナカイ"}]';

$.each(json, function(i, obj) {
alert(obj.city);
});
Chromeブラウザはコンソールにこのエラーを表示します:

Uncaught TypeError:'in'演算子を使用して検索できません...
in [{"id":"1","ville":"paris"}...
理想的な解決策は、JSON.parse() 関数または jQuery 関数を使用して JSON を JavaScript オブジェクトに変換することです $.parseJSON.

$.each(JSON.parse(json), function(i, obj) {
alert(obj.ville);
});

//ou

$.each($.parseJSON(json), function(i, obj) {
alert(obj.city);
});

JSON の例と JavaScript ループ for

次の例は、JavaScript の for ループを使用して JSON オブジェクトを反復処理する方法を示しています.



<ヘッド>

javascript の for と JSON ループの例<br /> <スクリプト src="https://code.jquery.com/jquery-1.10.2.js"><br /></head><br /><ボディ><br /><br /><スクリプト><br />$(function() {<br /><br />var data = [<br /> {"id":"1","name":"One"},<br /> {"id":"2","name":"Two"},<br /> {"id":"3","name":"Three"},<br /> {"id":"4","name":"Four"},<br /> {"id":"5","name":"Five"}<br />];<br /> <br />var data_length = data.length;<br />for (var i = 0; i < data_length; i++) {<br /> alert(data[i]["id"] + " " + data[i]["name"]);<br />}<br />});<br /></script><br /></body><br /></html><br /></pre>Resources:<br /><a href="http://api.jquery.com/each/" target="_blank">jQuery each() メソッド</a><br /><a href="http://stackoverflow.com/questions/4233354/how-to-iterate-json-data-in-jquery" target="_blank">jquery</a></div で json データを反復処理する方法> </div> </div> </main> </div> <footer class="col-md-12" style=" position: relative;"> <div class="footer-bottom"> <div class="container"> <p class="pull-center" style='text-align:center;margin: 1px 1px 8px 0px;'>© codeurjava.com 2015 - 2025 | <a href="https://www.codeurjava.com/privacy-policy.php">Privacy policy</a></p> </div> </div> </footer> </div> <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZDLC4L1BHK"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-ZDLC4L1BHK'); </script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script> <style> /* Pretty printing styles. Used with prettify.js. */ .str { color: #2a00ff; } .kwd { color: #7f0055;font-weight: bold; } .com { color: #3f7f5f; } .typ { color: #606; } .lit { color: #066; } .pun { color: #660; } .pln { color: #000; } .tag { color: #008; } .atn { color: #606; } .atv { color: #080; } .dec { color: #606; } pre.prettyprint { padding: 5px; border: 1px solid #888; } @media print { .str { color: #2a00ff; } .kwd { color: #7f0055; font-weight: bold; } .com { color: #3f7f5f; } .typ { color: #404; font-weight: bold; } .lit { color: #044; } .pun { color: #440; } .pln { color: #000; } .tag { color: #006; font-weight: bold; } .atn { color: #404; } .atv { color: #060; } } @media screen { .str { color: #2a00ff; } .kwd { color: #7f0055; font-weight: bold; } .com { color: #3f7f5f; } .typ { color: #000; } .lit { color: #044; } .pun { color: #440; } .pln { color: #000; } .tag { color: #006; font-weight: bold; } .atn { color: #404; } .atv { color: #060; } } </style> <script type="text/javascript"> addEventListener('load', function(event) { PR.prettyPrint(); }, false); </script> </body> </html>