Q&A
trick様
ご親切にありがとうございました。
早速試させていただきました。
dataTypeがjsonpだと出来なかったのでjsonに変更したところJSONデータをテーブルにすることができました！
最後に一つだけ。。。
クリックすると確かにテーブルは表示されますが、テーブルの上に何個か
undefined
undefined...
といくつも表示されます。
これはAPI側の問題で仕方ないことなんでしょうか？
jsonデータを持ってくるのに成功したと思ったら「undefined」が大量に表示されました。
エラーも特にでていません。記載したjsファイルは以下です。
javascript
1<html> 2<title>ta 3</title> 4<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 5<script type="text/javascript"> 6$.ajax({ 7 type: 'GET', 8 url: 'http://localhost:8180/api/doubutu/search?q=', 9 datatype: 'json', 10 success: function(json){ 11 $.each(json, function(i, item){ 12 $('body').prepend(item.codename + '<br>'); 13 }); 14 }, 15 error: function(){ 16 alert('error'); 17 } 18}); 19 </script> 20 21 22</html>
ご存知の方宜しくお願いします。
回答3件
0
$('body').prepend(item.codename + '<br>');
ここですが、json 形式なので配列になりますね
item[0] か item['codename'] になると思います。
投稿2015/11/02 07:16
総合スコア366
0
ベストアンサー
すいません私のソースバグですね
html
1<html> 2<head> 3 <title>js sample</title> 4 <script type="text/javascript" src="jquery-1.9.0.min.js"></script> 5 <script type="text/javascript"> 6 7 //画面構築完了後 8 $(function() { 9 $("#btn_1").click(function(){ 10 $.ajax({ 11 type: 'GET', 12 url: 'http://aaa/sample.json', 13 dataType: 'jsonp', 14 jsonpCallback: 'data', 15 success: function(json){ 16 var rows = ""; 17 18 $.each(json, function(i, item){ 19 $('body').prepend(item.PageName + '<br>'); 20 21 $.each(item,function(key,value){ 22 rows += "<tr>"; 23 rows += "<td>"; 24 rows += key; 25 rows += "</td>"; 26 rows += "<td>"; 27 rows += value; 28 rows += "</td>"; 29 }); 30 31 }); 32 //テーブルに作成したhtmlを追加する 33 $("#tbl").append(rows); 34 } 35 }); 36 }); 37 }); 38 39 </script> 40</head> 41<body> 42 <table id="tbl" border="1"> 43 <tbody> 44 <tr> 45 <th>英語</th><th>日本語</th> 46 </tr> 47 </tbody> 48 </table> 49 <input id="btn_1" type="button" value="検索" /> 50</body> 51</html>
json
1data ( 2[ 3{ 4"id" : "51027617", 5"doubutu_id" : "4006464", 6"first_reg_daytime" : "2015-08-10T00:00:00.000+0000", 7"maker_cd" : "104", 8"kesyu_name" : "", 9"car_cd" : "10402008", 10"doubutu_name" : "neko", 11"inu_name" : "シャモニー", 12"model_year" : 2000, 13"model_num" : "07640", 14"model_name" : "PD6W", 15"regulation_class" : "GF"} 16] 17) 18;
上記の json 形式であれば、このソースで表示されました。
ポイントは、
１．$.each(json, function(i, item){ の中の $.each(item,function(key,value){です。
最初の each では、item の中に json のデータが全て入っているので
item をさらに each でプロパティを取得しています。
２．rows is not defined は rows を初期化していなかったからかもしれません。
投稿2015/11/04 05:52
総合スコア366
0
返ってきているjsonの形式が意図したものと違うのではないでしょうか。
そのため、$.eachのループ処理にて、
item.codename というプロパティに値が無く、
undefinedが返されているのではないでしょうか。
js
1 success: function(json){ 2 $.each(json, function(i, item){ 3 console.log('json -> ', json) // jsonの形式を確認する 4 console.log('item.codename ->', item.codename) // ここがundefinedになっている 5 $('body').prepend(item.codename + '<br>'); 6 }); 7 },
恐らく、
$('body').prepend(item.codename + '<br>');
ではなく、
$('body').prepend(item[i] + '<br>');
こうあるべきかと思います。
json
1{ 2 property1: value1, 3 property2: value2, 4 property3: value3, 5 property4: value4, 6}
投稿2015/11/02 07:16
編集2015/11/02 07:20
総合スコア290
そうですね item[i] ですね
ikki57様
初めまして。
試させていただいたところダイアログにエラーと表示されました。
どちらが正しいのでしょうか…？（＠ω＠）
本当ですね、、、エラーが出ました。
確認したところ、item[index]だとundefinedでした。
```
data = {
p1: 'v1',
p2: 'v2'
}
$.each(data, function(item, index){
console.log('item.codename ->', item.codename);
console.log('item[index]->', item.index);
});
```
結果↓
item.codename -> undefined
item[index]-> undefined
item.codename -> undefined
item[index]-> undefined
下記が正かと思います。
```
data = {
p1: 'v1',
p2: 'v2'
}
$.each(data, function(prop, value){
console.log('prop ->', prop);
console.log('value ->', value);
});
```
結果↓
prop -> p1
value -> v1
prop -> p2
value -> v2
http://www.task-notes.com/entry/20140725/1406216933
こちらご参考までに。
> オブジェクトを指定
> オブジェクトを指定した場合は、コールバック関数の第1引数にはKEYが、第2引数には値が取得されます。
ikki57さま
<html>
<title>ta
</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$.ajax({
type: 'GET',
url: 'http://localhost:8180/api/stockcars/search?q=',
datatype: 'json',
success: function(json){
$.each(data, function(prop, value){
console.log('prop ->', prop);
console.log('value ->', value);
});
},
error: function(){
alert('error');
}
});
</script>
</html>
と記述を変えましたが
$.each(data, function(prop, value){
の行に「data is not defined」とエラーが出たのですが何か記述変えなくてはいけないところ等ございませんか？
返信遅くなりましてすみません。
解決済になったようですが、頂いた件、回答致しますと、
> $.each(data, function(prop, value){
> の行に「data is not defined」とエラーが出たのですが何か記述変えなくてはいけないところ等ございませんか？
ここは、`data`ではなく、`json` が正ですね。
> success: function(json){
> $.each(data, function(prop, value){
ではなく、
> success: function(json){
> $.each(json, function(prop, value){
が正です。または、
> success: function(data){
> $.each(data, function(prop, value){
も同義です。
ajaxが成功（success）して、
> success: function(json){
の `json` に、成功した結果（データ）が返ってきます。
そして、それを ループ処理（$.eaxh）するので、
> $.each(json, function(prop, value){
となります。
以上になります。
よろしくお願い致します。
ikki57様
解決済みにしたにも関わらず最後まで面倒を見ていただいてありがとうございます。
まだ未完成なのでその記述でも試してみたいと思います！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/02 07:45 編集
2015/11/02 07:55
2015/11/02 09:18
2015/11/02 10:57
2015/11/04 05:27