asp.net网站开发代码,wordpress分类首页调用,免费源码资源源码站入口,电子商务网站开发相关技术最近做了一个 MEAN stack 的 app 。后台用 NodeJS 从 Jira rest api 获得JSON数据并做处理#xff0c;然后前端用 AngularJS Ajax call 获得处理后的 JSON 数据#xff0c;显示到 App 上。处理了很多 JSON 数据#xff0c;决定编一个例子#xff0c;写一个总结。 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:christygmail.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 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 截图如下 2.前端从后台获得数据处理并显示 // 前端 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 pairfor ( 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 截图如下
