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中获取iframe的代码
Jan 11 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
layui的table中显示图片方法
Aug 17 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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作的文本留言本的例子(四)
2006/10/09 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP5.3新特性小结
2016/02/14 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
重定向实现代码
2006/11/20 Javascript
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
Prototype Class对象学习
2009/07/19 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python实现五子棋程序
2020/04/24 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
毕业生自荐书
2014/02/02 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
生产车间管理制度
2015/08/04 职场文书