Javascript 處理 JSON 資料 樣本

Javascript 處理 JSON 資料 樣本

最近做了一個 MEAN stack 的 app 。後台用 NodeJS 從 Jira rest api 獲得JSON資料並做處理，然後前端用 AngularJS Ajax call 獲得處理後的 JSON 資料，顯示到 App 上。處理了很多 JSON 資料，決定編一個例子，寫一個總結。

JSON 資料處理，基本就是 JSON String 和 JSON Object 之間的轉換。

JSON String 轉換成 JSON Object 用 JSON.parse 方法。反之，用 JSON. Stringify 方法。

以下的簡單例子中， NodeJS 擷取到使用者訂單資訊（JSON String），對資訊進行處理，在希望顯示在前端的資料中 “show" field 設定為 true，反之設定為 false。然後前端從後端得到資料，將需要顯示的資料，輸出到 console 中。CodePen 樣本連結

1. 後台從其他伺服器獲得資料並處理：

// 後台 NodeJs 從其他網站 restAPI 得到如下 JSON String 包含了使用者一次訂單的資訊。 使用者名稱，價格，產品資訊等。var cart_json = '{"username":"christy@gmail.com","city":"Vienna","state":"Virginia","country":"USA","products":[{"name":"PlayStation4","category":"PlayStation","price":"$399.99","quantity":1},{"name":"HD Sound Bar with Wireless Subwoofer","category":"Sound Bar","price":"$899.99","quantity":2},{"name":"POV HD Camcorder","category":"Action Cam","price":"$249.99","quantity":1}],"shipping":"$10.00","total":"$2449.96"}';// 將 JSON String 轉化成 JSON objectvar cart_obj = JSON.parse( cart_json );// 獲得 products objectvar products_obj = cart_obj.products;// 聲明新的 arrayvar products_arr = [];// 遍曆 products object， 每個 field 添加相應的 field “show” 構成新的 object。 如果想展示此 field， show 值設為 true， 反之為 false。for(var i = 0; i < Object.keys( products_obj ).length; i ++)  {    product_name_obj = { name : products_obj[i].name, show : true };    product_category_obj = { category : products_obj[i].category, show : true };    product_price_obj = { price : products_obj[i].price, show : false };    product_quantity_obj = { quantity : products_obj[i].quantity, show : false };    //將新的 object 合到一起構成添加到新的 array 中    products_arr[i] = { "product": [product_name_obj, product_category_obj, product_price_obj, product_quantity_obj] };  }// 新 array 中存放的是新的 JSON objectvar products_obj_new = products_arr;// 將 JSON object 轉換成 JSON String var products_str_new = JSON.stringify( products_obj_new );// 在 console 中輸出 JSON object 和 JSON String 供查看console.log('JSON object:');console.log( products_obj_new );console.log('JSON String:');console.log( products_str_new );

console 如下：

<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+Mi7HsLbLtNO688you/G1w8r9vt20psDtsqLP1Mq+o7o8L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0="brush:java;">// 前端 javascript 通過 Ajax call 得到 NodeJS 產生的 JSON Stringvar products_str_get = products_str_new;// 將 JSON String 轉換成 JSON objectvar products_obj_get = JSON.parse( products_str_get );// 輸出允許輸出的 product 資訊// 遍曆 productsfor( var i = 0; i < Object.keys( products_obj_get ).length; i++ ) { var product_obj = products_obj_get[i].product; console.log( "product " + i ); //遍曆每一個 product 中的 key value pair for ( var j = 0; j < Object.keys( product_obj ).length; j++ ) { // 如果 show field 值為 true 則顯示相應產品資訊 if( product_obj[j].show ) { var key = Object.keys( product_obj[j] )[0]; var value = product_obj[j][key]; console.log( key + ":" + value ); } } }
console 如下：