javascript json解析只顯示自定義字段

我已經使用Javascript解析了JASN文件，並將其作爲表格打印在瀏覽器中。在這種情況下，我只需要顯示firstname，lastname和地址字段（在標題和列中）。javascript json解析只顯示自定義字段

我該怎麼做？

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>

來源

2015-10-06 Jcet psycho

請分開你的css，html和js，使它更具可讀性。謝謝。 – rottenoats

下面的代碼

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)

}

將所有的數據表，而不是隻有那些你需要的。您需要檢查index是否在header_list中，並只添加相應的數據。

檢查此plunk。

來源

2015-10-06 18:48:44

我相信你的問題是在下面的代碼：

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，我不確定你最初的意圖是什麼。

來源

2015-10-06 18:05:43

javascript json解析只顯示自定義字段

回答

相關問題