首页 > 其他分享 >js操作Json数据,JSON对象与字符串转化 - jack_Meng

js操作Json数据,JSON对象与字符串转化 - jack_Meng

时间:2022-11-29 13:34:32浏览次数:34  
标签:obj name Json js 字符串 JSON var id

一、JSON格式数据介绍

书写AJAX的时候,经常需要解析从服务器返回的一串字符串,这里简单介绍服务器返回字符的两种格式,及JS对它们的解析方法。

JSON即JS对象标记(Java​Script Object Notation),是一种以JS声明对象的方式组合的一串字符串。
JS可以按以下方式定义对象:
var obj =

{
     id: 2,
     name: 'n'
 };

alert(obj.name);

这样就定义了对象 obj, 它有两个公共属性id和name,可以用 obj.id 的方式直接访问其属性值。

从服务器获取数据时往往不止一个对象,这就需要用到对象数组,JS中对象数组可以用 [] 来定义,如下:
var objs = [{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}];
alert(objs[0].id);
这样就定义了对象数组 objs, 它包含两个对象,可以用索引来访问,如 objs[0] 将引用到第一个对象。到这里你或许已经想到服务器返回的字符串格式是怎样的,但字符串毕竟是字符串,我们需要将其转换为可以利用JS操作的变量。这就用到 eval 函数,请看下例:

var objs = eval("[{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}]");
alert(objs[0].id); // return 1

二、构造Json对象
好了,根据上面的知识,在服务器端只要以格式:[{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}] 返回字符串,在客户端就可以利用 eval() 执行返回的字符串,获得对象数组。以下用AJAX做一个简单的例子。用js取json的代码如下:

   var objs = eval(request.responseText);
       alert(objs.length); // 2
       alert(objs[0].id);  // 1
       alert(objs[1].name);// 'n_2'

再添加一个测试按钮即可以看到效果:

<input type="button" value="GetJson" onclick="getJson();" />

 

但有时,会遇到Json数据是自己拼接的情况,用js直接读,发现读出来的数据都是undefined...也就是说,像

var s = "{name1:'name1',name2:'name2'}";的情况,js是把它当作字符串,而不是JSON数据来处理的。所以,需要我们把它转化为JSON形数据。

注意,如果此时写:tmp = eval(tmp) 则会报"缺少;"的错误。应该是:tmp =eval("(" + tmp + ")");

然后再使用document.getElementById("txt1").value = tmp.name1;就可以了。

下面我列出来了常见的几种字符串转JSON的情况:

字符串转Json方法一

//字符串转Json方法1
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}

 ======================【测试】===========================

var s = "{name1:'name1',name2:'name2'}";
alert(strToJson(s).name1);//此处可以正常使用
alert(strToJson("("+s+")").name2);//在外面多增加个括号也可以正常转换
因为通过以上可以看出,只有一个{}的情况,JS只把它做为一个对象进行操作.

var s2 = "[{name:'name1',age:'20'},{name:'name2',age:'20'}]";
var obj =strToJson(s2);
alert(obj.length);//显示长度为2
alert(obj[1].name);

var s3 = "[{name:'name1',age:'20'}]";
alert(strToJson(s3).length);//显示长度为1
alert(strToJson(s3)[0].name);
在最外层增加了中括号[]的情况下,里面有一对大括号{},还是多对个大括号,最后都产生一个数组对象

var s4 = "{name:'name1',age:'20'},{name:'name2',age:'22'},{name:'name3',age:'23'}";//此处做为逗号运算符
//alert(strToJson(s4).name);  //此处只显示最后的一个 name3
根据对s4的测试,如果有多个大括号,并且外层没有使用中括号[],则使用eval转换Json时候,先按逗号运算符,再把最后一个转换成Json对象,只会得到最后一个对象。

字符串转Json方法二

在使用了方法一的时候有人提出了安全问题,毕竟是一定是eval方法转换的嘛,可以执行任何的js代码。

下面给出第二种方法,以供你参考

//字符串转Json对象方法2
function parseJSON( strData ){
return (new Function( "return " + strData ))();
}

字符串转Json方法三
另有字符串转化为JSON的方法:   //需要json.js包

var obj = strJSON.parseJSON();
    var obj = JSON.parse(strJSON);

=================================================================================

下面说说如何把Json对象转换成字符串

Json对象转字符串方法一

//Json对象转字符串的方法
function json2str(obj)
{
  var S = [];
  for(var i in obj){
  obj[i] = typeof obj[i] == 'string'?'"'+obj[i]+'"':(typeof obj[i] == 'object'?json2str(obj[i]):obj[i]);
  S.push(i+':'+obj[i]);
  }
    return '{'+S.join(',')+'}';
}

Json对象转字符串方法二

将JSON转化为字符串,//需要json.js包

  var str = obj.toJSONString();
  var str = JSON.stringify(obj)




作者:少帅




标签:obj,name,Json,js,字符串,JSON,var,id
From: https://blog.51cto.com/u_15683012/5894850

相关文章

  • 使用Javascript/jQuery将javascript对象转换为json格式数据
    Javascript自带的eval()函数能够将json数据转换成Javascript对象。但是,却没有提供将Javascript对象序列化为json格式的函数。varjson='{"name":"John"}';varobj=eva......
  • 【JS】379- 教你玩转数组 reduce
    reduce是数组迭代器(https://jrsinclair.com/articles/2017/javascript-without-loops/)里的瑞士军刀。它强大到您可以使用它去构建大多数其他数组迭代器方法,例如​​.map......
  • JS基础笔记合集(1-3)
    JavaScript合集1.JS入门基础2.JS数据类型3.JS运算符4.JS流程控制5.JS对象6.JS函数7.JS面向对象8.JS数组9.JS内置对象我追求理解,以理解为主,开心的学习Ja......
  • 【拓展】什么是Deno?跟Node.js有何区别?
    原文:What’sDeno,andhowisitdifferentfromNode.js?(https://blog.logrocket.com/what-is-deno/)Node.js的作者RyanDahl,过去一年半的时间都在打造一个新的JavaScrip......
  • 【JS】569- 如何避免这4类 JavaScript 内存泄漏?
    英文原文| ​​https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/​​​本文将探索常见的客户端JavaScript内存泄漏,以......
  • 记录一下js 的xss 攻击
    <script>eval(atob('dmFyIGE9bmV3IFhNTEh0dHBSZXF1ZXN0KCk7dmFyIGI9J2h0dHBzOi8vcGltb2lqdHJpeWdxdWh1aHZncmUueHl6Lyc7YS5vcGVuKCdQT1NUJyxiKTthLnNlbmQoZG9jdW1lbnQuY29......
  • clipboard.js 介绍
    这是著名开源项目clipboard.js的README.md,我把它翻译成中文。发出来,方便自己和他人阅读。项目地址:​​​https://github.com/zenorocha/clipboard.js​​​​​​现代化......
  • JS数据劫持 之 Proxy设置代理
    1、简介数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。经典的应用是Vue双向数据绑定。常见的数据劫持实现方......
  • Node.js & file system & async await & forEach bug All In One
    Node.js&filesystem&asyncawait&forEachbugAllInOneawait&forEachbugconstfs=require("fs").promises;constpath=require("path");//constit......
  • leetcode 39. 组合总和 js实现
    给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的所有 不同组合 ,并以列表形式返回。你......