JavaScript: JSON.parse and JSON.stringify
09 May 2015使用 JSON 做 Client 端與 Server 端資料傳遞的說明與範例。
JSON.parse
目的
目前 Client 端與 Server 端溝通的方式大多以 JSON 字串格式來溝通。從 Server 端取得 JSON 字串後，利用JSON.parse()將 JSON 字串剖析為 JavaScript 物件供操作使用。
範例 1
簡單表示如何將 JSON 字串剖析為 JavaScript 物件。
var jsonStr = '{"name": "Summer"}';
var parsedObj = JSON.parse(jsonStr);
console.log(parsedObj.name); // Summer
範例 2
將 JSON 字串剖析為 JavaScript 物件（含陣列，且內含物件）。
var jsonStrObjsinArray = '[ { "name": "Apple", "count": "5" }, { "name": "Orange", "count": "6" }]';
var parsedObjinArray = JSON.parse(jsonStrObjsinArray);
console.log(parsedObjinArray); // [Object, Object]
$.each(parsedObjinArray, function(index, value) {
console.log(value);
});
/* Result:
Object {name: "Apple", count: "5"}
Object {name: "Orange", count: "6"}
Object {name: "Grape", count: "1"}
Object {name: "Cherry", count: "0"}
Object {name: "Guava", count: "15"}
Object {Lemon: "Apple", count: "99"} */
備註
$.each(collection, function(index, value){}): 物件或陣列，可參考.each()collection.each(function(index, value){}): 物件，可參考jQuery.each()
範例 3
藉由 ajax 取得 JSON 字串，然後利用JSON.parse()剖析為 JavaScript 物件。
// ajax response with objs in array (in json format)
// fake ajax
var dataArray = [];
$.ajax.fake.registerWebservice('/getData', function(data) {
return {
success: true,
data: [
{
title: '宜蘭太平山自行車挑戰',
link: 'http://www.google.com.tw',
thumbnail: 'dummy.png',
date: '2015/06/06 (六)',
startDate: '2015-06-06T10:00',
signup: '20150525',
location: '新北市政府行市民廣場',
streetAddress: '光復南路102號3樓',
addressLocality: '台北市',
addressRegion: '台灣',
latitude: 22.999,
longitude: 121.555,
tag: [
{ link: '/search?keyword=999', text: '練跑' },
{ link: '/search?keyword=888', text: '夜光路跑' },
{ link: '/search?keyword=777', text: '核心肌群' },
{ link: '/search?keyword=666', text: 'PUMA' },
],
},
{
title: '宜蘭太平山自行車挑戰',
link: 'http://www.google.com.tw',
thumbnail: 'dummy.png',
date: '2015/06/06 (六)',
startDate: '2015-06-06T10:00',
signup: '20150525',
location: '新北市政府行市民廣場',
streetAddress: '光復南路102號3樓',
addressLocality: '台北市',
addressRegion: '台灣',
latitude: 22.999,
longitude: 121.555,
tag: [
{ link: '/search?keyword=999', text: '練跑' },
{ link: '/search?keyword=888', text: '夜光路跑' },
{ link: '/search?keyword=777', text: '核心肌群' },
{ link: '/search?keyword=666', text: 'PUMA' },
],
},
],
message: 'success!',
};
});
$.ajax({
url: '/getData',
type: 'post',
fake: true, // fake ajax
data: JSON.stringify({
Data: dataArray,
}),
dataType: 'json',
error: function(xhr) {
alert('噢噢！發生錯誤了！請重新再試一次～');
},
success: function(response) {
console.log(response); // Object {success: true, data: Array[2], message: "success!"}
$.each(response.data, function(index, value) {
console.log(value);
});
/* Result:
Object {title: "宜蘭太平山自行車挑戰", link: "http://www.google.com.tw", thumbnail: "dummy.png", date: "2015/06/06 (六)", startDate: "2015-06-06T10:00"…}
Object {title: "宜蘭太平山自行車挑戰", link: "http://www.google.com.tw", thumbnail: "dummy.png", date: "2015/06/06 (六)", startDate: "2015-06-06T10:00"…} */
},
});
JSON.stringify
目的
當在 Clent 端操作的 JavaScript 物件要傳遞給 Server 端時，使用JSON.stringify()將物件（或陣列，甚至是原始型別）序列化為一個 JSON 字串，然後將這個 JSON 字串傳送給 Server 端。
範例
將序列化後的 JSON 字串利用 ajax 傳送給 Server 端。
var dataArr = [];
$.ajax({
url: '/sendData',
type: 'post',
data: JSON.stringify({
Data: parsedObjinArray, // {"Data":[{"name":"Apple","count":"5"},{"name":"Orange","count":"6"}]}
}),
dataType: 'json',
error: function(xhr) {},
success: function(response) {},
});
推薦閱讀
這篇文章的原始位置在這裡-JavaScript - JSON.parse and JSON.stringify
由於部落格搬遷至此，因此在這裡放了一份，以便閱讀；部份文章片段也做了些許修改，以期提供更好的內容。
