为什么我得到未定义的追加到页面，但我可以在控制台中获取数据？

Question

所以我试图从为我提供的 .json 文件中附加数据。但是，而不是页面上显示的信息。那么 "undefined" 正在附加到页面和控制台。

我正在做大量测试控制台日志和调试器。所以我在控制台中得到了实际的对象或数据。

我还想分享我得到的 json 文件，但它放不下。因为它超过了字符数。所以我只分享了一部分。

这是JS文件

$("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 文件：

<!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/scrollreveal@3.3.2/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 执行的内容如下所示：

<div class="container">  <!-- hold it together with this main container -->
      <div id="divsocial">
        <p>
          <img src="http://placehold.it/200x300" alt="" /><br />
          <span>
            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
          </span> <br />
          <a href="http:\/\/www.bullring.co.uk\/news\/fashion\/aff-edit-new-pastels">
Click here to explore the trend</a>
        </p>
      </div>

Answer 1

运行 foreach 循环遍历 data.items 而不是 data 因为 data.items 是数组

$("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
);

并且由于 info.item_data 不是字符串而是对象，因此您可能会在段落中得到 [object Object]。我认为你犯了一些错误，而不是 item_data 你的意思是别的

Answer 2

您不能附加整个对象，您必须分别附加每个键值对。

$("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

} //点击结束按钮 );

为什么我得到未定义的追加到页面，但我可以在控制台中获取数据？

Why am I getting undefined appending to the page, but I can get data in the console?

ajax

jquery

json

undefined