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 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 截图如下：

Javascript 处理 JSON 数据示例相关推荐

javascript通过json数据按格式生成一个按字母分类排序的分类信息表
效果图如下 1.json数据格式 var _people=[{name:'朱瑞',url:'aaaaaa',nick:'zhu'},{name:'刘桂清',url:'aaaaa',nick:'liu' ...
JavaScript 解析 JSON 数据
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...
javascript将JSON数据导出为Excle表格
文章目录方式一:导出json数据 const jsonData = [{name:'路人甲',phone:'123456789',email:'000@123456.com'},{name:'炮灰乙 ...
php 自定义格式化,PHP自定义函数格式化json数据示例
本文实例讲述了PHP自定义函数格式化json数据的方法.分享给大家供大家参考,具体如下: /** * Formats a JSON string for pretty printing * * @pa ...
纯JavaScript 实现JSON数据导出到Excel(支持多个Sheet页)
核心思想: 拿到JSON 格式的数据后,使用JS逻辑生成符合 EXCEL格式规范的XML字符串然后转字符串内容把换成一个Blob 实例对象最后通过临时创建的一个A标签通过触发它的点击事件模拟浏览 ...
java json csv_彻底理解使用JavaScript 将Json数据导出CSV文件
前言将数据报表导出,是web数据报告展示常用的附带功能.通常这种功能都是用后端开发人员编写的.今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件. 原理首先在本地用Excel ...
JavaScript解析JSON数据
1. json字符串转化为json对象可以通过JavaScript的eval()函数来进行解析,代码如下: <script type="text/javascript"&g ...
JavaScript处理json数据(对象，数组，集合)
1.什么是json? JSON ( JavaScript Object Notation) ,它是一串字符串只不过元素会使用特定的符号标注.{} 双括号表示对象[] 中括号表示数组"&qu ...
sql解析json oracle,oracle 11g plsql解析json数据示例1
以下存储过程将数据库表中的clob类型字段(存储的内容为对应Json格式数据)读取出来,对其解析,进行相关业务操作 CREATE OR REPLACE PROCEDURE xq_midso_gen(p ...

Javascript 处理 JSON 数据示例

Javascript 处理 JSON 数据示例相关推荐

最新文章

热门文章

Javascript 处理 JSON 数据 示例

Javascript 处理 JSON 数据 示例相关推荐

最新文章

热门文章

Javascript 处理 JSON 数据示例

Javascript 处理 JSON 数据示例相关推荐