html页面如何转化为json,如何在HTML页面上显示JSON文件

HTML代码：

只要保持在一个变量的JSON数据(或)单独的文件作为'FamilyAndFriends.json'。

var data = {

"people":[{"fname":"Adam",

"lname":"Schmitt",

"relation":"Brother",

"relationid":"1"

},

{"fname":"Andrew",

"lname":"Name",

"relation":"Brother",

"relationid":"1"

},

{"fname":"Jenna",

"lname":"Name",

"relation":"Wife",

"relationid":"2"

},

{"fname":"Gary",

"lname":"Name",

"relation":"Father",

"relationid":"3"

},

{"fname":"Judy",

"lname":"Name",

"relation":"Mother",

"relationid":"4"

},

{"fname":"Justin",

"lname":"Name",

"relation":"Friend",

"relationid":"5"

},

{"fname":"Billy",

"lname":"Name",

"relation":"Friend",

"relationid":"5"

},

{"fname":"Robbie",

"lname":"Name",

"relation":"Friend",

"relationid":"5"

},

{"fname":"Dylan",

"lname":"Name",

"relation":"Friend",

"relationid":"5"

},

{"fname":"Zach",

"lname":"Name",

"relation":"Friend",

"relationid":"5"

}]

};

实例外部JSON使用javascript：

var link;

for (var t = 0; t < data.people.length; t++){

link = document.createElement("a"+t);

var ulist = document.getElementById("list");

var newItem = document.createElement("li");

newItem.appendChild(link);

ulist.appendChild(newItem);

link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname;

link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE

if (typeof window.addEventListener === 'function'){

(function() {

link.addEventListener('click', function(){

var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE

indexId = parseInt(indexId); //PARSE FROM STRING TO INTEGER

alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE.

});

})(link);

}

}

结果就会像下面，当您单击第一个列表：

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true); // YOUR EXTERNAL JSON URL

request.onload = function() {

if (request.status >= 200 && request.status < 400) {

// Success!

var data = JSON.parse(request.responseText);

var link;

for (var t = 0; t < data.people.length; t++){

link = document.createElement("a"+t);

var ulist = document.getElementById("list");

var newItem = document.createElement("li");

newItem.appendChild(link);

ulist.appendChild(newItem);

link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname;

link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE

if (typeof window.addEventListener === 'function'){

(function (_td) {

link.addEventListener('click', function(){

var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE

indexId = parseInt(indexId); //PARSE FROM STRING TO INTEGER

alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE.

});

})(link);

}

}

} else {

// We reached our target server, but it returned an error

}

};

request.onerror = function() {

// There was a connection error of some sort

};

request.send();

使用JavaScript内部JSON例

Brother

摇滚吧！