質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

JSON形式を所得したらundefinedとでる

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 22K+

score 132

jsonデータを持ってくるのに成功したと思ったら「undefined」が大量に表示されました。

エラーも特にでていません。記載したjsファイルは以下です。

<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/doubutu/search?q=',
  datatype: 'json',
  success: function(json){
    $.each(json, function(i, item){
      $('body').prepend(item.codename + '<br>');
    });
  },
  error: function(){
    alert('error');
  }
});
    </script>
    
    
</html>

ご存知の方宜しくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

$('body').prepend(item.codename + '<br>');

ここですが、json 形式なので配列になりますね
item[0] か item['codename'] になると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/02 18:18

    trick様

    JSONの形式そういえば記載していなかったですね。。。

    {
    "id" : "51027617",
    "doubutu_id" : "4006464",
    "first_reg_daytime" : "2015-08-10T00:00:00.000+0000",
    "maker_cd" : "104",
    "kesyu_name" : ",
    "car_cd" : "10402008",
    "doubutu_name" : "neko",
    "inu_name" : "シャモニー",
    "model_year" : 2000,
    "model_num" : "07640",
    "model_name" : "PD6W",
    "regulation_class" : "GF",

    です。

    提示していただいた書式をまねてみたのですがまた同じようにundefinedが出てしまいました・・・

    キャンセル

  • 2015/11/02 19:57

    これであれば、 ikki57さんも記載していますが
    i  item で表示されそうです。
    $.each(json, function(i, item){

    rows += "<tr>";
    rows += "<td>";
    rows += i;
    rows += "</td>";
    rows += "<td>";
    rows += item;
    rows += "</td>";
    });

    $("#tbl").append(rows);
    こんな感じでテーブル形式に表示できませんかね
    ためしていないので、間違っているかもしれませんが

    キャンセル

  • 2015/11/04 14:27

    trick様
    参考にして下記のように編集しました。

    <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=&#039;,
    datatype: 'json',
    success: function(json){
    $.each(json, function(i, item){

    rows += "<tr>";
    rows += "<td>";
    rows += i;
    rows += "</td>";
    rows += "<td>";
    rows += item;
    rows += "</td>";
    });

    $("#tbl").append(rows);
    },
    error: function(){
    alert('error');
    }
    });
    </script>


    </html>

    記述を変えました。
    rows += "<tr>";
    rows is not definedというエラーが出ました・・
    しかし行は定義していますよね?
    なんでこんなエラーが出るのか・・・

    キャンセル

checkベストアンサー

0

すいません私のソースバグですね
<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
    
    //画面構築完了後
    $(function() {
        $("#btn_1").click(function(){
          $.ajax({
              type: 'GET',
              url: 'http://aaa/sample.json',
              dataType: 'jsonp',
              jsonpCallback: 'data',
              success: function(json){
                var rows = "";
                    
                     $.each(json, function(i, item){
                      $('body').prepend(item.PageName + '<br>');
                      
                        $.each(item,function(key,value){
                        rows += "<tr>";
                        rows += "<td>";
                        rows += key;
                        rows += "</td>";
                        rows += "<td>";
                        rows += value;
                        rows += "</td>";
                        });
                      
                    });
                    //テーブルに作成したhtmlを追加する
                    $("#tbl").append(rows);
              }
            });
        });
    });

    </script>
</head>
<body>
    <table id="tbl" border="1">
        <tbody>
            <tr>
                <th>英語</th><th>日本語</th>
            </tr>
        </tbody>
    </table>
    <input id="btn_1" type="button" value="検索" />
</body>
</html>
data (
[
{
"id" : "51027617",
"doubutu_id" : "4006464",
"first_reg_daytime" : "2015-08-10T00:00:00.000+0000",
"maker_cd" : "104",
"kesyu_name" : "",
"car_cd" : "10402008",
"doubutu_name" : "neko",
"inu_name" : "シャモニー",
"model_year" : 2000,
"model_num" : "07640",
"model_name" : "PD6W",
"regulation_class" : "GF"}
]
)
;
上記の json 形式であれば、このソースで表示されました。
ポイントは、
1.$.each(json, function(i, item){ の中の $.each(item,function(key,value){です。
最初の each では、item の中に json のデータが全て入っているので
item をさらに each でプロパティを取得しています。

2.rows is not defined は rows を初期化していなかったからかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/04 15:58

    trick様

    ご親切にありがとうございました。
    早速試させていただきました。
    dataTypeがjsonpだと出来なかったのでjsonに変更したところJSONデータをテーブルにすることができました!
    最後に一つだけ。。。

    クリックすると確かにテーブルは表示されますが、テーブルの上に何個か
    undefined
    undefined...
    といくつも表示されます。
    これはAPI側の問題で仕方ないことなんでしょうか?

    キャンセル

  • 2015/11/04 17:22

    ごめんなさい
    undefined がでるのは
    $('body').prepend(item.PageName + '<br>');
    多分これのせいです。消してください。

    キャンセル

  • 2015/11/04 18:02

    trick様
    指示された点を修正したらundefined消えました!
    貴重なお時間いただき感謝してます。
    ありがとうございました!!!
    ベストアンサーにさせていただきます。

    キャンセル

0

返ってきているjsonの形式が意図したものと違うのではないでしょうか。

そのため、$.eachのループ処理にて、
item.codename というプロパティに値が無く、
undefinedが返されているのではないでしょうか。

  success: function(json){
    $.each(json, function(i, item){
        console.log('json -> ', json)                        // jsonの形式を確認する
        console.log('item.codename ->', item.codename)        // ここがundefinedになっている
      $('body').prepend(item.codename + '<br>');
    });
  },

恐らく、

$('body').prepend(item.codename + '<br>');
ではなく、
$('body').prepend(item[i] + '<br>');
こうあるべきかと思います。

{
    property1: value1,
    property2: value2,
    property3: value3,
    property4: value4,
}


投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/04 14:19

    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=&#039;,
    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」とエラーが出たのですが何か記述変えなくてはいけないところ等ございませんか?

    キャンセル

  • 2015/11/04 18:44

    返信遅くなりましてすみません。
    解決済になったようですが、頂いた件、回答致しますと、

    > $.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){
    となります。

    以上になります。
    よろしくお願い致します。

    キャンセル

  • 2015/11/04 19:14

    ikki57様
    解決済みにしたにも関わらず最後まで面倒を見ていただいてありがとうございます。
    まだ未完成なのでその記述でも試してみたいと思います!


    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る