文章详情

汇总整理下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 

一种是键值遍历:

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使用方法教程的文章就介绍到这了。

您可能感兴趣的文章:

  • JavaScript正则表达式获取图片链接地址
  • 最完整指南 JavaScript 的错误处理
  • 详解JavaScript原型与原型链
  • JavaScript 实现拖拽效果组件功能(兼容移动端)
  • JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
  • 夯基础之手撕javascript继承详解
  • JavaScript 实现轮播图特效的示例
  • 详解JavaScript 高阶函数

版权:版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 70068002@qq.com 举报,一经查实,本站将立刻删除。

转载请注明出处:https://www.stntk.com/2517.html

相关推荐
JS前端模拟Excel条件格式实现数据条效果
需求背景 最近业务中遇到一个有意思的需求,是要在现有的表格中实现类似 Excel 中的数据条的效果,在数据比较多的时候单纯看表格里的数字会比…
头像
前端开发 2024-05-26
962
js 实现汉字简体和繁体之间的互相转换
简体字 简体字(Simplified Chinese,简体中文),是中国大陆地区目前在用的字体,由官方公布的简体字,主要由传承字以及1950…
头像
前端开发 2024-05-26
746
如何使用nginx配置代理多个前端资源?
背景 两套不同的前端使用同一个后端服务,前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flas…
头像
前端开发 2024-05-26
612
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢? 1、HTML代码 <ul class="list-group"> …
头像
前端开发 2024-05-26
1,165
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
公司UI设计的拟态框弹窗跟Element Plus UI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。 这个需求最主要的是要…
头像
前端开发 2024-05-26
1,166
前端如何实现网页变灰功能?
今天来从前端的角度看看网页置灰是如何实现的,以及相关使用技巧! 实现思路 先来看看一些主流网站是如何实现置灰的: BiliBili: 京东 …
头像
前端开发 2024-05-26
871
发表评论
暂无评论

还没有评论呢,快来抢沙发~

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

70068002@qq.com

扫描二维码

关注微信公众号