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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript 一些用法小结
2009/09/11 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
开始着手第一个Django项目
2015/07/15 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
用Python shell简化开发
2018/08/08 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
岗位廉洁从业承诺书
2014/03/28 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
优秀团员事迹材料
2014/12/25 职场文书
汽车转让协议书
2015/01/29 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
爱心捐助活动总结
2015/05/09 职场文书
歌舞青春观后感
2015/06/10 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
python神经网络ResNet50模型
2022/05/06 Python