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 相关文章推荐
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
JavaScript流程控制(分支)
Dec 06 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
js Math 对象的方法
2013/09/01 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
简单谈谈json跨域
2016/03/13 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
浅谈js的异步执行
2016/10/18 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
python微信公众号开发简单流程
2018/03/23 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python实现简单俄罗斯方块
2020/03/13 Python
python如何求100以内的素数
2020/05/27 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
校外活动方案
2014/08/28 职场文书
节约用电倡议书
2015/04/28 职场文书
2016年十一促销广告语
2016/01/28 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
创业计划书之甜品店
2019/09/18 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android