2016-11-20 6 views
0

私のために提供された.jsonファイルからデータを追加しようとしています。ただし、ページに表示される情報の代わりに。まあ、 "undefined"はページとコンソールに追加されています。ページに追加されている定義されていないのはなぜですか?しかし、コンソールでデータを取得できますか?

多くのテストコンソールログとデバッガを実行しています。だから私は実際のオブジェクトやデータをコンソールに入れました。

また、私が与えられたjsonファイルを共有したいと思いますが、ここでは適合しません。キャラクターの量を超えているため。だから私はその一部だけを共有しています。

この

ここ
$("button").click(function(){ 
    $.getJSON("http://192.168.0.6:8080/posts.json", function(data) { 
     $.each(data, function(items, info) { 
     // console.log(info); 
     $("div").append("<p>" + info.item_data + "</p>"); 

     }); //end loop 
    }); //end ajax 
    } //end button on click 
); 

がHTMLファイルであるJSファイルです:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title> Like Pinterest</title> 
    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8"> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    </head> 
    <body> 
    <div class="container"> <!-- hold it together with this main container --> 
     <div id="divsocial"> 
     <p> 

      <!-- the json data --> 
     </p> 
     </div> 
     <button type="button" name="button" id="button">Oh Hai</button> 
     <!-- <button type="button" name="button" id="button">Load More</button> --> 
    </div> 
    </body> 
    <script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="main.js"></script> 
</html> 

.JSONファイル:

{ 
    "items": [{ 
      "item_id": "497", 
      "item_data": { 
       "image_id": 226, 
       "text": "Seen on the catwalks at Chanel, Ralph Lauren, and Topshop Unique; think luscious icy bright pastels to add a soft pop of colour to the dull winter months. It works beautifully against grey tailoring and comes in a variety of textures from sugar plum boucle to cashmere soft duck egg blue\u2026", 
       "link": "http:\/\/www.bullring.co.uk\/news\/fashion\/aff-edit-new-pastels", 
       "link_text": "Click here to explore the trend.", 
       "image_url": "http://placehold.it/600x350" 
      }, 
"account_data": "", 
      "item_source_id": "e3d89e1f295f72b85737d5067ac52e6c", 
      "service_id": "5", 
      "account_id": "3", 
      "category_id": "1", 
      "item_name": "Manual: Seen on the catwalks at Chanel, Ralph Lauren", 
      "item_status": "published", 
      "item_created": "2014-08-29 11:50:14", 
      "item_imported": "2014-08-29 11:50:14", 
      "item_published": "2014-09-10 10:06:59", 
      "account_name": "AFF", 
      "account_slug": "manual", 
      "account_group": "", 
      "account_order": "0", 
      "account_status": "active", 
      "account_item_default_status": "published", 
      "account_import_interval": "2592000", 
      "account_last_imported": "2014-06-01 00:00:00", 
      "account_next_import": "2020-01-01 00:00:00", 
      "account_created": "2014-08-28 11:38:45", 
      "account_updated": "2014-08-29 09:09:18", 
      "service_name": "Manual", 
      "service_slug": "manual", 
      "service_class": "Manual", 
      "category_slug": "pinned", 
      "category_name": "Pinned" 
     } 
} 

だから、私が欲しいものJSは、次のようになります実行しますこれは:

として data.itemsの代わり data以上10

答えて

0

それぞれのキー値のペアを別々に追加する必要があるオブジェクト全体を追加することはできません。

$("button").click(function(){ 
$.getJSON("http://192.168.0.6:8080/posts.json", function(data) { 
    $.each(data.items, function(items, info) { 
    // console.log(info); 
    $("div").append("<p>" + info.item_data.text + "</p>" + "<a href=" + info.item_data.link + "> + info.item_data.link_text +</a>"); 

    }); //end loop 
}); //end ajax 

クリック 上} //終了ボタン)。

+0

あなたは正しいです!どうもありがとうございます。私は練習を続けます。 – Tiffany

1

実行foreachループは、配列

$("button").click(function(){ 
    $.getJSON("http://192.168.0.6:8080/posts.json", function(data) { 
     $.each(data.items, function(items, info) { 
     // console.log(info); 
     $("div").append("<p>" + info.item_data + "</p>"); 

     }); //end loop 
    }); //end ajax 
    } //end button on click 
); 

であり、あなたが段落に[object Object]を得ることができますのでinfo.item_dataあるため、文字列ではなくオブジェクトではありません。私はあなたが何か間違いをしていると思うし、代わりにitem_dataあなたは何かを意味する

+0

あなたは正しいですが、私はある時点でそれを試しました。私は '[object Object]'を2段落でページに表示します。そしてyesの 'item_data'が正しいです。上記のように 'info.items'またはこれがどこにあるのかを最初に示すようなものでなければなりません。 これまでにありがとうございました!私はまだそれを手にしています。あなたが私に見せた解決策はまだありません。 – Tiffany

+0

ああ、何らかの理由で段落形式[オブジェクトオブジェクト]に倍増しているということです。だから私はいくつかの理由で2段落、 '[object Object]'を持っているように。 – Tiffany

+0

JS実行後に必要なHTMLを表示してください – bugwheels94

関連する問題