Javascript 在url中包含Json数据，以便输出到表中的html页面_Javascript_Html_Json_Fetch

Javascript 在url中包含Json数据，以便输出到表中的html页面

javascript html json

Javascript 在url中包含Json数据，以便输出到表中的html页面,javascript,html,json,fetch,Javascript,Html,Json,Fetch,我是一个完全的初学者，所以很简单，我在亚马逊AWS的URL链接中有Json代码，我希望能够获取数据并将其输出到HTML页面上的表中。你能帮我吗。正如您在下面的html代码、JS代码和示例信息中看到的，我想从JSURL链接中的数据中提取这些信息代码如下 <!DOCTYPE html> <html> <head> <meta name="description" content=""> <meta name="viewport" conten

我是一个完全的初学者，所以很简单，我在亚马逊AWS的URL链接中有Json代码，我希望能够获取数据并将其输出到HTML页面上的表中。你能帮我吗。正如您在下面的html代码、JS代码和示例信息中看到的，我想从JSURL链接中的数据中提取这些信息代码如下

<!DOCTYPE html>

<html>
<head>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Fjalla+One|Cantarell:400,400italic,700italic,700" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="styles.css">

<title>Convert JSON Data to HTML Table Example</title>
<style>
    table, th, td 
    {
        margin:10px 0;
        border:solid 1px #333;
        padding:2px 4px;
        font:15px Verdana;
    }
    th {
        font-weight:bold;
    }


  </style>
 </head>
 <body>

 <TITLE>"Country information"</TITLE>
 <h2>Country information </h2>

 <section class="content">
 <div class="row">
 <div class="box">
  <div class="box-body">
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
  </div>
</div>

我使用类似这样的东西来使用JSON构建html表

var _table_ = document.createElement('table'),
      _tr_ = document.createElement('tr'),
      _th_ = document.createElement('th'),
      _td_ = document.createElement('td');
      _table_.classList.add('table')
      function buildHtmlTable(arr) {
          var table = _table_.cloneNode(false),
              columns = addAllColumnHeaders(arr, table);
          for (var i=0, maxi=arr.length; i < maxi; ++i) {
              var tr = _tr_.cloneNode(false);
              for (var j=0, maxj=columns.length; j < maxj ; ++j) {
                  var td = _td_.cloneNode(false);
                      cellValue = arr[i][columns[j]];
                  td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
                  tr.appendChild(td);
              }
              table.appendChild(tr);
          }
          return table;
      }
      function addAllColumnHeaders(arr, table)
      {
          var columnSet = [],
              tr = _tr_.cloneNode(false);
          for (var i=0, l=arr.length; i < l; i++) {
              for (var key in arr[i]) {
                  if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                      columnSet.push(key);
                      console.log(columnSet)
                      var th = _th_.cloneNode(false);
                      th.appendChild(document.createTextNode(key));
                      tr.appendChild(th);
                  }
              }
          }
          table.appendChild(tr);
          return columnSet;
      }

按如下方式构建api请求：

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Response comes through here
      }
  };
  xhttp.open("GET", "/api/url/", true);
  xhttp.send();

然后，如果只想将这3个对象推送到表中，请创建一个数组，然后使用这些对象构建表（未测试）

查看我做的这个JSFIDLE示例：

我已经将您的标记更改为一个标记。请理解，这是两种完全不同的编程语言，就像火腿和汉堡包一样密切相关，如果你错误地标记了你的问题，你将无法让合适的专家来审查它，这可能会损害你获得体面帮助的机会。因为我对Javascript一无所知，这就是我能为你做的一切，除了祝你一切顺利，希望你能尽快得到一个像样的答案。哦，万分感谢，很抱歉，下次我会知道的哇，万分感谢你的快速回复，你知道我如何从url获取数据，因为这不起作用-getJSON（“”，function（err，data）{if（err！=null）{console.error（err）；}else{var text=

Name:${data.Name}区域：${data.area}边界：${data.borders}

console.log（text）；}嘿@Caro很抱歉耽搁了我的时间，我刚刚更新了我的答案，希望能有所帮助。J@Caro这解决了你的问题吗？我得到了要输出到html页面的数据，问题是现在试图将其添加到表中以显示-任何tips@Caro你能详细说明它是如何输出到html页面的吗？我的回复中的更新是否提供了更多的澄清什么？

var _table_ = document.createElement('table'),
      _tr_ = document.createElement('tr'),
      _th_ = document.createElement('th'),
      _td_ = document.createElement('td');
      _table_.classList.add('table')
      function buildHtmlTable(arr) {
          var table = _table_.cloneNode(false),
              columns = addAllColumnHeaders(arr, table);
          for (var i=0, maxi=arr.length; i < maxi; ++i) {
              var tr = _tr_.cloneNode(false);
              for (var j=0, maxj=columns.length; j < maxj ; ++j) {
                  var td = _td_.cloneNode(false);
                      cellValue = arr[i][columns[j]];
                  td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
                  tr.appendChild(td);
              }
              table.appendChild(tr);
          }
          return table;
      }
      function addAllColumnHeaders(arr, table)
      {
          var columnSet = [],
              tr = _tr_.cloneNode(false);
          for (var i=0, l=arr.length; i < l; i++) {
              for (var key in arr[i]) {
                  if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                      columnSet.push(key);
                      console.log(columnSet)
                      var th = _th_.cloneNode(false);
                      th.appendChild(document.createTextNode(key));
                      tr.appendChild(th);
                  }
              }
          }
          table.appendChild(tr);
          return columnSet;
      }

document.getElementById('yourDIV').appendChild(buildHtmlTable(res));

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Response comes through here
      }
  };
  xhttp.open("GET", "/api/url/", true);
  xhttp.send();

// Response comes through here
var obj = []
var data = xhttp.responseText
obj.push(data.name, data.area, data.borders)
document.getElementById('yourDIV').appendChild(buildHtmlTable(data));