JavaScript: JSON.parse and JSON.stringify

使用 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"} */

備註

範例 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) {},
});

Demo / Source Code

推薦閱讀


這篇文章的原始位置在這裡-JavaScript - JSON.parse and JSON.stringify

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

javascript