Question

所以我试图从我提供的.json文件中追加数据。但是，而不是页面上显示的信息。好的“未定义”将附加到页面和控制台。

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

此外，我想分享我给出的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

在data.items而不是data上运行foreach循环，因为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

} //点击结束按钮）;

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

2 个答案: