Javascript 处理 JSON 数据 示例

页面导航:首页 > 网络编程 > JavaScript > Javascript 处理 JSON 数据 示例

Javascript 处理 JSON 数据 示例

来源: 作者: 时间:2016-02-03 09:20 【

最近做了一个 MEAN stack 的 app 。后台用 NodeJS 从 Jira rest api 获得JSON数据并做处理,然后前端用 AngularJS Ajax call 获得处理后的 JSON 数据,显示到 App 上。处理了很多 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":"","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 object
var cart_obj = JSON.parse( cart_json );
// 获得 products object
var products_obj = cart_obj.products;
// 声明新的 array
var 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 object
var 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.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+Mi7HsLbLtNO688you/G1w8r9vt20psDtsqLP1Mq+o7o8L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0="brush:java;">// 前端 javascript 通过 Ajax call 得到 NodeJS 生成的 JSON String var products_str_get = products_str_new; // 将 JSON String 转换成 JSON object var products_obj_get = JSON.parse( products_str_get ); // 输出允许输出的 product 信息 // 遍历 products for( 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 截图如下:






Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<