JavaScript前后端JSON使用方法教程


Posted in Javascript onNovember 23, 2020

汇总整理下JSON在JavaScript前后端中的使用方法,包括字符串和JSON对象的互转,JSON数组的遍历,JSON对象key值的获取,JSON内容格式化输出到文件,读取JSON内容文件转化为JSON对象等。

一、JavaScript后端JSON操作方法

1、JavaScript JSON字符串转JSON对象

var testStr = '{"name":"will","age":18,"hobby":"football"}'
var jsonObj = JSON.parse(testStr)

2、JS JSON对象转字符串

var testObj = {
 "name": 'will',
 "age": '18',
 "hobby": 'football'
}
var jsonStr = JSON.stringify(testObj)

3、JavaScript JSON数组的遍历

一种是for循环遍历:

for (var l = 0; l < jsonArray.length; l++) {
 var jsonItem = jsonArray[l]
}

一种是键值遍历:

var testJSArray = [
 {"number": 'one'},
 {"number": "two"},
 {"number": "three"},
 {"number": "four"},
 {"number": "five"},
 {"number": "six"},
]
for(index in testJSArray){
 console.log("index:" + index + "; name:" + testJSArray[index].number)
}

输出内容如下:

index:0; number:one
index:1; number:two
index:2; number:three
index:3; number:four
index:4; number:five
index:5; number:six

4、JS JSON数组合并

数组合并连接用concat方法,前端和后端都是用concat。

var testJSArray01 = [
 {"name": 'one'},
 {"name": "two"},
 {"name": "three"},
]
var testJSArray02 = [
 {"name": "four"},
 {"name": "five"},
 {"name": "six"},
]
var testJSONMerge = testJSArray01.concat(testJSArray02)

5、JavaScript获取JSON对象key值

var testObj = {
 "name": 'will',
 "age": '18',
 "hobby": 'football'
}
for (var key in testObj){
 console.log("key:" + key + ", value:" + testObj[key])
}

输出内容如下:

key:name, value:will
key:age, value:18
key:hobby, value:football

6. JS格式化输出JSON内容到文件

var writeStream = fs.createWriteStream(filePath);

return new Promise(function(resolve, reject) {
 writeStream.write("写入你需要的字符串内容");
 // 换行,如果是字符串中包含换行的字符,写入到.txt文件的时候并不能换行,需要输出换行符才行。
 writeStream.write("\n");
 // 格式化输出JSON字符串内容, JSONObj是要输出的JSON数据对象
 writeStream.write(JSON.stringify(JSONObj, null, "\t") + "\n");

 writeStream.end();
 writeStream.on('finish', () => {
 resolve(filePath);
 });
});

7、JavaScript读取JSON文件内容

不管内容是保存成.json还是.txt,只要是合法的JSON字符串内容都可以。

var filePath = 'xxx/xxx/test.json'
var fileContent = fs.readFileSync(filePath).toString();
var fileJson = JSON.parse(fileContent);

二、JavaScript前端JSON操作方法

1、字符串转JSON,angular.fromJson() 等价于JSON.parse()

var processInfo = angular.fromJson('{"process":[]}');

2、JSON转字符串,angular.toJson() 等价于JSON.stringify()

var out = angular.toJson(jsonObj, true);

3、JSON数组遍历

angular.forEach(jsonArray, function(jsonItem) {

});

4、判断JSON对象是否含有某个Key值

比如判断jsonObj这个对象是否含有“samples”这个key值

jsonObj.hasOwnProperty("samples")

总结

到此这篇关于JavaScript前后端JSON使用方法教程的文章就介绍到这了,更多相关JS前后端JSON使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
微信小程序实现简单的select下拉框
Nov 23 #Javascript
记录一次websocket封装的过程
Nov 23 #Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 #Javascript
微信小程序实现锚点跳转
Nov 23 #Javascript
javascript实现电商放大镜效果
Nov 23 #Javascript
用webAPI实现图片放大镜效果
Nov 23 #Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
You might like
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
基于python内置函数与匿名函数详解
2018/01/09 Python
python3调用R的示例代码
2018/02/23 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
创业计划书的主要内容有哪些
2014/01/29 职场文书
临床护理求职信
2014/04/26 职场文书
生产车间标语
2014/06/11 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
地震慰问信
2015/02/14 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Python import模块的缓存问题解决方案
2021/06/02 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL