堆栈内存溢出
  简体   繁体   English

如何从JSON捕获数据并使用HTML显示数据

[英]How to catch data from JSON and display it with HTML

 原文  2016-09-15 20:50:25  8   2    javascript/ jquery/ html/ json

问题描述

So, I'm working on a project to create a "Twitter" page. 因此，我正在一个项目上创建“ Twitter”页面。 The goal is to use the JSON file ( http://vagalumewifi.com.br/timeline.json ) and to show some of the information contained in it. 目标是使用JSON文件（ http://vagalumewifi.com.br/timeline.json ）并显示其中包含的某些信息。 So far my page does not show anything, just the table heads. 到目前为止，我的页面没有显示任何内容，只是表头。 I tried saving the json file on my computer as well but still nothing. 我也尝试将json文件保存在我的计算机上，但仍然没有。 

 $(function() { var posts = []; var sitioOnline = "http://vagalumewifi.com.br/timeline.json?callback=?"; $.getJSON("timeline.json", function(data) { $.each(data.posts, function(i, f) { var tblRow = "<tr>" + "<td>" + f.user.username + "</td>" + "<td>" + f.content + "</td>" + "<td>" + f.user.location + "</td>" + "<td> " + f.date + "</td>" + "</tr>" $(tblRow).appendTo("#entrydata tbody"); }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <table> <thead> <th>UserName</th> <th>Message</th> <th>Location</th> <th>Time</th> </thead> <tbody> </tbody> </table> </body> </html>

2 个解决方案

解决方案1
 1  2016-09-15 21:12:35

It is important to consider the following: 重要的是要考虑以下几点：

  • You can make XMLHttpRequest calls when your web is running in a Web Server or localhost server. 您的网站在Web服务器或localhost服务器中运行时，可以进行XMLHttpRequest调用。
  • You can make XMLHttpRequest calls to any resource that have the response header Access-Control-Allow-Origin: * . 您可以对具有响应标头Access-Control-Allow-Origin: *任何资源进行XMLHttpRequest调用。 The url http://vagalumewifi.com.br/timeline.json doesn't have it, so, you can't request through XMLHttpRequest object. url http://vagalumewifi.com.br/timeline.json没有它，因此，您不能通过XMLHttpRequest对象进行请求。 You can't use $.getJSON . 您不能使用$.getJSON 。

在此处输入图片说明

I've made a little demo by using local data from the json file. 我通过使用json文件中的本地数据进行了一些演示。 ( http://vagalumewifi.com.br/timeline.json ) （ http://vagalumewifi.com.br/timeline.json ） 

 <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8" /> <style type="text/css"> table#entrydata { border-collapse: collapse; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } table#entrydata caption { background-color: inherit; background-image: linear-gradient(#e5eafb, #8b99af); border-left: solid 1px #cccccc; border-right: solid 1px #cccccc; border-top: solid 1px #cccccc; border-radius: 10px 10px 0 0; color: #ffffff; font-size: 1em; padding: 5px; } table#entrydata th { background-color: inherit; background-image: linear-gradient(#8b99af, #e5eafb); color: #ffffff; } table#entrydata th, table#entrydata td { border: solid 1px #cccccc; font-size: 0.8em; padding: 5px; } .odd { background-color: #e7ecf5; color: #444444; } .even { background-color: #ffffff; color: #444444; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <script> $(function() { var data = [{ "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2014-01-04T09:28:54 +03:00", "likes": 745, "user": { "id": 37, "username": "pearson", "location": "Unionville, Palau", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Duis aliquip ad consectetur laborum dolor ad ut nostrud in irure. Duis magna dolore excepteur eiusmod non. Reprehenderit voluptate est culpa incididunt cillum incididunt consectetur veniam. Sit reprehenderit et dolore et laborum aliquip irure excepteur sit excepteur sit sit in. Ex incididunt Lorem adipisicing in. Ex excepteur dolor pariatur tempor do Lorem culpa pariatur ad. In in do ad nulla fugiat eiusmod adipisicing elit ipsum eiusmod nulla reprehenderit.\\r\\n", "friends": 609 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2015-03-17T09:07:29 +03:00", "likes": 992, "user": { "id": 39, "username": "fischer", "location": "Sunwest, Michigan", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Cupidatat id amet enim id ullamco dolor consectetur voluptate. Nisi labore minim commodo reprehenderit amet ullamco ea sit. Cillum proident pariatur cupidatat sit adipisicing et quis nostrud ut veniam mollit aute adipisicing in. Commodo est ullamco commodo voluptate consectetur minim eu ad labore sint consequat cillum.\\r\\n", "friends": 908 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2015-08-31T07:28:57 +03:00", "likes": 377, "user": { "id": 40, "username": "carver", "location": "Westwood, West Virginia", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Minim id mollit nostrud velit amet sit veniam enim ut excepteur anim mollit voluptate velit. Est labore ipsum consectetur cupidatat ut ea reprehenderit ex sunt aliquip. Irure culpa proident sint commodo magna esse excepteur amet do labore pariatur amet. Do laborum commodo sint exercitation quis tempor deserunt ex fugiat elit labore laborum voluptate. Eu sunt occaecat voluptate Lorem aliqua exercitation ea aliquip. Aliqua ipsum duis eu nulla ipsum ipsum consequat consequat deserunt occaecat dolore cupidatat aute. Aute esse reprehenderit sint ad eu commodo non nulla.\\r\\n", "friends": 1 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2015-09-14T03:35:53 +03:00", "likes": 672, "user": { "id": 41, "username": "zelma", "location": "Flintville, Washington", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Nulla est quis labore ipsum est mollit laborum. Cillum est mollit anim duis mollit minim in. Ipsum cillum labore ut amet culpa esse dolor amet proident irure. Ullamco sint Lorem ad ut pariatur labore in laborum anim qui non. Excepteur pariatur id labore et exercitation non. Sint sunt commodo reprehenderit mollit commodo pariatur non veniam nostrud ullamco.\\r\\n", "friends": 195 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2014-05-07T07:40:35 +03:00", "likes": 462, "user": { "id": 42, "username": "cassandra", "location": "Greenfields, New Jersey", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Sit anim consectetur amet in eu. Incididunt enim voluptate labore pariatur nisi nisi occaecat exercitation incididunt proident. Officia minim sint magna adipisicing incididunt. In non exercitation laborum consequat. Officia officia eiusmod nisi culpa et ullamco. Et officia dolore id voluptate sunt cillum est laboris cupidatat tempor tempor ullamco do. Aliqua pariatur ea ea eu.\\r\\n", "friends": 640 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2015-06-19T01:45:59 +03:00", "likes": 317, "user": { "id": 43, "username": "whitehead", "location": "Floris, Georgia", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Eu esse sunt ipsum labore mollit eu sunt. Aliqua labore proident amet exercitation sunt culpa duis nostrud laboris cillum esse enim esse. Duis velit exercitation minim aute proident veniam laboris adipisicing aliqua in consequat commodo. Proident reprehenderit ut deserunt eu reprehenderit magna ipsum excepteur excepteur laborum. Et sint cupidatat in velit sunt ipsum. Enim nostrud enim duis exercitation elit aute eu cupidatat.\\r\\n", "friends": 920 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2014-11-02T05:16:09 +03:00", "likes": 564, "user": { "id": 44, "username": "avila", "location": "Vincent, North Dakota", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Culpa anim mollit do voluptate labore adipisicing consectetur aute nostrud velit. Magna minim nulla ea incididunt labore irure nisi velit ea nulla dolore reprehenderit duis deserunt. Pariatur aute nostrud irure eiusmod laborum enim incididunt. Minim proident velit proident excepteur irure eiusmod velit anim eiusmod. Cupidatat laborum cillum dolor aliquip ea sint. Eu quis incididunt adipisicing culpa sunt reprehenderit nostrud incididunt reprehenderit dolor. Eu incididunt incididunt ut magna dolore dolore cupidatat reprehenderit exercitation sint.\\r\\n", "friends": 764 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2015-04-27T12:39:45 +03:00", "likes": 246, "user": { "id": 45, "username": "gardner", "location": "Riverton, Arizona", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Excepteur dolore reprehenderit in nisi sit sint excepteur culpa enim cillum do sit nisi laboris. Exercitation proident eiusmod reprehenderit velit tempor culpa do dolore labore. Excepteur pariatur ea velit eiusmod commodo amet commodo deserunt adipisicing aute. Id ea ea laborum aliqua dolor deserunt nisi labore id aliqua minim. Laboris esse dolore laborum labore fugiat labore exercitation enim fugiat mollit incididunt. Cupidatat nulla aliqua veniam qui. Minim duis elit Lorem dolore sit.\\r\\n", "friends": 766 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2015-01-19T01:02:02 +03:00", "likes": 130, "user": { "id": 46, "username": "griffith", "location": "Sardis, California", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Adipisicing eiusmod aliqua nostrud anim cillum consectetur. Reprehenderit cupidatat cupidatat reprehenderit elit est ipsum laboris sint laboris magna laborum. Fugiat sunt ad elit voluptate quis deserunt minim commodo ex id nisi. Amet et labore eu proident ullamco nisi eu id ipsum labore incididunt consequat eu mollit. Laboris ut quis fugiat veniam occaecat. Excepteur anim ea fugiat pariatur deserunt ex Lorem veniam id esse laborum. Consectetur ad deserunt commodo ex et duis anim excepteur cillum cillum et consequat in occaecat.\\r\\n", "friends": 183 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2014-11-22T11:21:55 +03:00", "likes": 318, "user": { "id": 47, "username": "rhea", "location": "Hachita, Nevada", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Aute eiusmod laboris adipisicing cupidatat aliquip exercitation cillum tempor duis adipisicing proident voluptate occaecat. Nostrud officia commodo ut ea. Amet fugiat excepteur nostrud incididunt. Nostrud enim elit amet quis. Ex ut in id qui eiusmod.\\r\\n", "friends": 852 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2014-02-08T11:59:53 +03:00", "likes": 977, "user": { "id": 48, "username": "hyde", "location": "Lydia, Northern Mariana Islands", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Sint incididunt in ad adipisicing mollit non dolor velit fugiat magna id dolor. Duis esse esse id adipisicing. Tempor adipisicing dolore irure et duis sunt deserunt laboris aliqua culpa voluptate. Minim consectetur dolore do amet.\\r\\n", "friends": 747 } }, { "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", "date": "2014-03-15T03:29:25 +03:00", "likes": 962, "user": { "id": 49, "username": "barr", "location": "Watrous, South Carolina", "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", "bio": "Cupidatat enim qui et adipisicing fugiat magna amet commodo duis id in. Nostrud ipsum amet fugiat id fugiat ut dolore deserunt aute anim. Consectetur duis occaecat anim excepteur deserunt ut excepteur sint quis.\\r\\n", "friends": 543 } }]; var tblRow; $.each(data, function(i, f) { tblRow = "<tr class="; tblRow += (i % 2 === 0) ? "odd" : "even"; tblRow += "><td>"; tblRow += f.user.username; tblRow += "</td><td>"; tblRow += f.content; tblRow += "</td><td>"; tblRow += f.user.location; tblRow += "</td><td>"; tblRow += f.date; tblRow += "</td></tr>"; $(tblRow).appendTo("#entrydata tbody"); }); }); </script> <table id="entrydata"> <caption> Timeline </caption> <thead> <tr> <th>UserName</th> <th>Message</th> <th>Location</th> <th>Time</th> </tr> </thead> <tbody></tbody> </table> </body> </html>

Update: 更新：

I'd suggest to use jQuery 1.12.4 . 我建议使用jQuery 1.12.4 。

Demo using json file: 使用json文件的演示：

index.html: index.html： 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <style type="text/css">
    table#entrydata {
      border-collapse: collapse;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    table#entrydata caption {
      background-color: inherit;
      background-image: linear-gradient(#e5eafb, #8b99af);
      border-left: solid 1px #cccccc;
      border-right: solid 1px #cccccc;
      border-top: solid 1px #cccccc;
      border-radius: 10px 10px 0 0;
      color: #ffffff;
      font-size: 1em;
      padding: 5px;
    }
    table#entrydata th {
      background-color: inherit;
      background-image: linear-gradient(#8b99af, #e5eafb);
      color: #ffffff;
    }
    table#entrydata th,
    table#entrydata td {
      border: solid 1px #cccccc;
      font-size: 0.8em;
      padding: 5px;
    }
    .odd {
      background-color: #e7ecf5;
      color: #444444;
    }
    .even {
      background-color: #ffffff;
      color: #444444;
    }
  </style>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
  <script>
    $(function() {
      $.getJSON("timeline.json", function(data) {
        var tblRow;
        $.each(data, function(i, f) {
          tblRow = "<tr class=";
          tblRow += (i % 2 === 0) ? "odd" : "even";
          tblRow += "><td>";
          tblRow += f.user.username;
          tblRow += "</td><td>";
          tblRow += f.content;
          tblRow += "</td><td>";
          tblRow += f.user.location;
          tblRow += "</td><td>";
          tblRow += f.date;
          tblRow += "</td></tr>";
          $(tblRow).appendTo("#entrydata tbody");
        });
      });
    });
  </script>
  <table id="entrydata">
    <caption>
      Timeline
    </caption>
    <thead>
      <tr>
        <th>UserName</th>
        <th>Message</th>
        <th>Location</th>
        <th>Time</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</body>
</html>

timeline.json: timeline.json： 

[
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-01-04T09:28:54 +03:00",
        "likes": 745,
        "user": {
            "id": 37,
            "username": "pearson",
            "location": "Unionville, Palau",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Duis aliquip ad consectetur laborum dolor ad ut nostrud in irure. Duis magna dolore excepteur eiusmod non. Reprehenderit voluptate est culpa incididunt cillum incididunt consectetur veniam. Sit reprehenderit et dolore et laborum aliquip irure excepteur sit excepteur sit sit in. Ex incididunt Lorem adipisicing in. Ex excepteur dolor pariatur tempor do Lorem culpa pariatur ad. In in do ad nulla fugiat eiusmod adipisicing elit ipsum eiusmod nulla reprehenderit.\r\n",
            "friends": 609
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-06-25T05:53:59 +03:00",
        "likes": 333,
        "user": {
            "id": 38,
            "username": "benita",
            "location": "Farmers, Tennessee",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Nulla id quis laboris ullamco aliqua cupidatat dolor aliquip excepteur sint enim eiusmod reprehenderit. Minim nostrud Lorem consequat consequat nulla commodo nulla quis officia duis. Est deserunt cupidatat non labore voluptate ipsum nulla. Id esse aliqua exercitation laborum quis dolore laboris culpa velit Lorem dolor irure pariatur quis. Aute enim aute exercitation eu cupidatat officia eiusmod ut consequat esse eu nisi.\r\n",
            "friends": 403
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-03-17T09:07:29 +03:00",
        "likes": 992,
        "user": {
            "id": 39,
            "username": "fischer",
            "location": "Sunwest, Michigan",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Cupidatat id amet enim id ullamco dolor consectetur voluptate. Nisi labore minim commodo reprehenderit amet ullamco ea sit. Cillum proident pariatur cupidatat sit adipisicing et quis nostrud ut veniam mollit aute adipisicing in. Commodo est ullamco commodo voluptate consectetur minim eu ad labore sint consequat cillum.\r\n",
            "friends": 908
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-08-31T07:28:57 +03:00",
        "likes": 377,
        "user": {
            "id": 40,
            "username": "carver",
            "location": "Westwood, West Virginia",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Minim id mollit nostrud velit amet sit veniam enim ut excepteur anim mollit voluptate velit. Est labore ipsum consectetur cupidatat ut ea reprehenderit ex sunt aliquip. Irure culpa proident sint commodo magna esse excepteur amet do labore pariatur amet. Do laborum commodo sint exercitation quis tempor deserunt ex fugiat elit labore laborum voluptate. Eu sunt occaecat voluptate Lorem aliqua exercitation ea aliquip. Aliqua ipsum duis eu nulla ipsum ipsum consequat consequat deserunt occaecat dolore cupidatat aute. Aute esse reprehenderit sint ad eu commodo non nulla.\r\n",
            "friends": 1
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-09-14T03:35:53 +03:00",
        "likes": 672,
        "user": {
            "id": 41,
            "username": "zelma",
            "location": "Flintville, Washington",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Nulla est quis labore ipsum est mollit laborum. Cillum est mollit anim duis mollit minim in. Ipsum cillum labore ut amet culpa esse dolor amet proident irure. Ullamco sint Lorem ad ut pariatur labore in laborum anim qui non. Excepteur pariatur id labore et exercitation non. Sint sunt commodo reprehenderit mollit commodo pariatur non veniam nostrud ullamco.\r\n",
            "friends": 195
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-05-07T07:40:35 +03:00",
        "likes": 462,
        "user": {
            "id": 42,
            "username": "cassandra",
            "location": "Greenfields, New Jersey",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Sit anim consectetur amet in eu. Incididunt enim voluptate labore pariatur nisi nisi occaecat exercitation incididunt proident. Officia minim sint magna adipisicing incididunt. In non exercitation laborum consequat. Officia officia eiusmod nisi culpa et ullamco. Et officia dolore id voluptate sunt cillum est laboris cupidatat tempor tempor ullamco do. Aliqua pariatur ea ea eu.\r\n",
            "friends": 640
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-06-19T01:45:59 +03:00",
        "likes": 317,
        "user": {
            "id": 43,
            "username": "whitehead",
            "location": "Floris, Georgia",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Eu esse sunt ipsum labore mollit eu sunt. Aliqua labore proident amet exercitation sunt culpa duis nostrud laboris cillum esse enim esse. Duis velit exercitation minim aute proident veniam laboris adipisicing aliqua in consequat commodo. Proident reprehenderit ut deserunt eu reprehenderit magna ipsum excepteur excepteur laborum. Et sint cupidatat in velit sunt ipsum. Enim nostrud enim duis exercitation elit aute eu cupidatat.\r\n",
            "friends": 920
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-11-02T05:16:09 +03:00",
        "likes": 564,
        "user": {
            "id": 44,
            "username": "avila",
            "location": "Vincent, North Dakota",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Culpa anim mollit do voluptate labore adipisicing consectetur aute nostrud velit. Magna minim nulla ea incididunt labore irure nisi velit ea nulla dolore reprehenderit duis deserunt. Pariatur aute nostrud irure eiusmod laborum enim incididunt. Minim proident velit proident excepteur irure eiusmod velit anim eiusmod. Cupidatat laborum cillum dolor aliquip ea sint. Eu quis incididunt adipisicing culpa sunt reprehenderit nostrud incididunt reprehenderit dolor. Eu incididunt incididunt ut magna dolore dolore cupidatat reprehenderit exercitation sint.\r\n",
            "friends": 764
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-04-27T12:39:45 +03:00",
        "likes": 246,
        "user": {
            "id": 45,
            "username": "gardner",
            "location": "Riverton, Arizona",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Excepteur dolore reprehenderit in nisi sit sint excepteur culpa enim cillum do sit nisi laboris. Exercitation proident eiusmod reprehenderit velit tempor culpa do dolore labore. Excepteur pariatur ea velit eiusmod commodo amet commodo deserunt adipisicing aute. Id ea ea laborum aliqua dolor deserunt nisi labore id aliqua minim. Laboris esse dolore laborum labore fugiat labore exercitation enim fugiat mollit incididunt. Cupidatat nulla aliqua veniam qui. Minim duis elit Lorem dolore sit.\r\n",
            "friends": 766
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-01-19T01:02:02 +03:00",
        "likes": 130,
        "user": {
            "id": 46,
            "username": "griffith",
            "location": "Sardis, California",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Adipisicing eiusmod aliqua nostrud anim cillum consectetur. Reprehenderit cupidatat cupidatat reprehenderit elit est ipsum laboris sint laboris magna laborum. Fugiat sunt ad elit voluptate quis deserunt minim commodo ex id nisi. Amet et labore eu proident ullamco nisi eu id ipsum labore incididunt consequat eu mollit. Laboris ut quis fugiat veniam occaecat. Excepteur anim ea fugiat pariatur deserunt ex Lorem veniam id esse laborum. Consectetur ad deserunt commodo ex et duis anim excepteur cillum cillum et consequat in occaecat.\r\n",
            "friends": 183
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-11-22T11:21:55 +03:00",
        "likes": 318,
        "user": {
            "id": 47,
            "username": "rhea",
            "location": "Hachita, Nevada",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Aute eiusmod laboris adipisicing cupidatat aliquip exercitation cillum tempor duis adipisicing proident voluptate occaecat. Nostrud officia commodo ut ea. Amet fugiat excepteur nostrud incididunt. Nostrud enim elit amet quis. Ex ut in id qui eiusmod.\r\n",
            "friends": 852
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-02-08T11:59:53 +03:00",
        "likes": 977,
        "user": {
            "id": 48,
            "username": "hyde",
            "location": "Lydia, Northern Mariana Islands",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Sint incididunt in ad adipisicing mollit non dolor velit fugiat magna id dolor. Duis esse esse id adipisicing. Tempor adipisicing dolore irure et duis sunt deserunt laboris aliqua culpa voluptate. Minim consectetur dolore do amet.\r\n",
            "friends": 747
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-03-15T03:29:25 +03:00",
        "likes": 962,
        "user": {
            "id": 49,
            "username": "barr",
            "location": "Watrous, South Carolina",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Cupidatat enim qui et adipisicing fugiat magna amet commodo duis id in. Nostrud ipsum amet fugiat id fugiat ut dolore deserunt aute anim. Consectetur duis occaecat anim excepteur deserunt ut excepteur sint quis.\r\n",
            "friends": 543
        }
    }
]

解决方案2
 0  2016-09-16 17:14:10

Well, according to my experience $.getJSON() does work, even on an HTML file that is opened from a local file system like file:///storage/emulated/0/www/index.html : 好吧，根据我的经验，即使在从本地文件系统（如file:///storage/emulated/0/www/index.html ）打开的HTML文件中， $.getJSON() 可以工作： 

<html>
<head><meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(function(){
$.getJSON('jsontst.js',function(d){
   var html='<table>'+
   $.map(d,function(o){
    return '<tr><td>'+$.map(
 'user.username,content,user.location,date'.split(','),
 function(p){var q=p.split('.');
  return q[1]?o[q[0]][q[1]]:o[q[0]];}).join('</td><td>')+'</td></tr>';
   }).join('\n')+'</table>';
   $('#out').html(html);
  });
});
</script>
</head>
<body>
<div id="out"></div>
</body>
</html>

jsontst.js contains the data as described by OP and is located in the same directory as the HTML file. jsontst.js包含OP所描述的数据，并且与HTML文件位于同一目录中。 The above code generates the desired output. 上面的代码生成所需的输出。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将json数据显示为html - How to Display json data into html 如何将JSON数据显示为HTML？ - How to display the JSON data into HTML? 如何显示html中JSON数据中的特殊字符？ - How to display special characters from JSON data in html? 如何使用 js table 将数据从 json 显示为 HTML - How to display data from json into HTML using js table 如何使用带有JSON数据的jQuery显示解码的html文本 - How to display decoded html text with jQuery with data from JSON 如何从JavaScript的JSON数据以HTML显示图像 - How to display an Image in HTML from javascript's JSON data 如何将本地 JSON 文件中的数据显示到 HTML 表中？ - How to display data from local JSON file to HTML table? 在html中显示来自json数据的图像？ - Display image from json data in html? 在 html div 中显示来自 JSON 文件的数据 - Display data from JSON file in html div 从JSON读取数据并以html显示 - Reading data from JSON and display in html
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM