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 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
js实现录音上传功能
Nov 22 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空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python版DDOS攻击脚本
2019/06/12 Python
python和c语言的主要区别总结
2019/07/07 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
药学专业毕业生求职信
2013/10/20 职场文书
档案接收函范文
2014/01/10 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
工作收入住址证明
2014/10/28 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis
Mysql中mvcc各场景理解应用
2022/08/05 MySQL