javascript json 解析仅显示自定义字段

Question

我已经使用 Javascript 解析了一个 JASN 文件，并在我的浏览器中将其打印为 table。在这种情况下，我只需要显示 firstname、lastname 和地址字段（在 header 和列中）。

我该怎么做？

var header_list = []
var json_key = []
var table = document.createElement("table")
var trow = document.createElement("tr")
table.appendChild(trow)

var data
var header_name

function loadJSON(path, success, error) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        if (success)
          success(JSON.parse(xhr.responseText));
      } else {
        if (error)
          error(xhr);
      }
    }
  };
  xhr.open("GET", path, true);
  xhr.send();
}

function table_header(header_name) {



  var th = document.createElement("th")
  trow.appendChild(th)
  var header = document.createTextNode(header_name)
  th.appendChild(header)

  document.getElementById("jsonTable").appendChild(trow)

  header_list.push(header_name)

}



loadJSON("person.json", function(data) {


    table_header("FirstName")


    table_header("LastName")

    table_header("Age")

    table_header("Address")


    table_header("PhoneNumber")



    for (var i = 0; i < header_list.length; i++) {
      var tr = document.createElement("tr")
      table.appendChild(tr)

      for (index in data[i]) {
        json_key.push(index)
        keys = Object.keys(data[0])


        var td = document.createElement("td")
        tr.appendChild(td)

        data_json = document.createTextNode(JSON.stringify(data[i][index]))

        td.appendChild(data_json)


        document.getElementById("jsonTable").appendChild(tr)
      }
    }



  },
  function(xhr) {
    console.error(xhr);
  }
);



person.json

  [{
    "First Name": "John",
    "lastName": "Smith",
    "age": 25,
    "address": {
      "streetAddress": "21 2nd Street",
      "city": "New York",
      "state": "NY",
      "postalCode": "10021"
    },
    "phoneNumber": [{
      "type": "home",
      "number": "212 555-1234"
    }, {
      "type": "fax",
      "number": "646 555-4567"
    }],
    "date of birth": "28 dec 2000"

  }

]

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div>
    <table border="2" cellpadding="10" id="jsonTable" style="border-collapse: collapse;">
    </table>
  </div>
</body>

</html>

Answer 1

我认为您的问题出在以下代码中：

for (index in data[i]) {
    json_key.push(index)
    keys = Object.keys(data[0])

    var td = document.createElement("td")
    tr.appendChild(td)

    data_json = document.createTextNode(JSON.stringify(data[i][index]))

    td.appendChild(data_json)
    document.getElementById("jsonTable").appendChild(tr)
  }

您遍历数据，而不是字段（名字、姓氏等）。也许像下面这样的东西可能更合适：

for (index in data[i]) {
    json_key.push(index)
    keys = Object.keys(data[0])

    var td = document.createElement("td")
    tr.appendChild(td)
    data_json = document.createTextNode(JSON.stringify(data[i][index]["First Name"]))
    td.appendChild(data_json)

    var td = document.createElement("td")
    tr.appendChild(td)
    data_json = document.createTextNode(JSON.stringify(data[i][index]["lastName"]))
    td.appendChild(data_json)

    // Add Address, age and phone number here

    document.getElementById("jsonTable").appendChild(tr)
  }

你也可以放弃 JSON.stringify，我不确定你的初衷是什么。

Answer 2

下面的代码

for (index in data[i]) {
    json_key.push(index)
    keys = Object.keys(data[0])

    var td = document.createElement("td")
    tr.appendChild(td)

    data_json = document.createTextNode(JSON.stringify(data[i][index]))

    td.appendChild(data_json)
    document.getElementById("jsonTable").appendChild(tr)

}

将所有数据添加到 table 而不是仅添加您需要的数据。您需要检查index是否在header_list中，只添加相应的数据。

检查此 plunk。

javascript json 解析仅显示自定义字段

javascript json parsing showing only custom fields

javascript

json

custom-headers