js读取json数据

1.js 中读取JSON的方法探讨

js读取JSON的方法主要有两种:
方法一:函数构造定义法返回
var strJSON = "{name:'json name'}";//得到的JSON
var obj = new Function("return" + strJSON)();//转换后的JSON对象
alert(obj.name);//json name

方法二:js中著名的eval函数
var strJSON = "{name:'json name'}";//得到的JSON
var obj = eval( "(" + strJSON + ")" );//转换后的JSON对象
alert(obj.name);//json name

第二种方法需要注意的是,对象表达式{'name':'json name'}必须用“()”扩住,否则
var strJSON = "{name:'json name'}";
var obj = eval(strJSON);
alert(obj.constructor);//String 构造函数
alert(obj.name);//undefine
必须把对象表达式扩起来eval执行才能生成一个匿名对象!

 

2.   服务端向客户端返回了一串JSON格式的数据。在有些时候,因为某些特殊的原因我们不知道原始的key值,因此我们此时无法象正常一样通过key值,来获取value值。这时我们必须循环读取JSON对象数据。废话少说,来看例子。 

  服务端后台返回到客户端的JSON格式字符串:var str = '[{"uname":"王强","day":"2010/06/17"},{"uname":"王海云","day":"2010/06/11"}]';  

  我们把它转换成JSON对象:var jsonList=eval("("+str+")");这时候如果以用断点跟踪查看这个jsonList对象,其实你会发现,他的长度为2,即jsonList.length=2。它的每一项都是一个单独的JSON对象。


假设我们不知道"uname"和"day"这两个key值,我们开始对jsonList执行循环操作。 

  for(var i=0;i<jsonList.length;i++){

     for(var key in jsonList[i]){

           alert("key:"+key+",value:"+jsonList[i][key]); 

        } 

   }

  这样我们就可以轻松的获取我所需要的key值和value值了

示例如下:

< script type = " text/javascript "  language = " javascript " >
 
var  languages  =  {
    cn:{
    lang:
' ch ' ,
    name:
" 中文 "
 },
 en:{
    lang:
" 英文 " ,
    name:
" en "
 }
 };
 document.write(languages.cn.name);
< / script>

 



### 如何在JavaScript中读取JSON数据并附带示例代码 为了理解如何在JavaScript环境中解析和操作JSON对象,可以从简单的字符串转换到复杂的异步请求逐步深入。下面详细介绍几种常见场景下的解决方案。 #### 解析本地JSON字符串 当拥有一个JSON格式的字符串时,可以使用内置函数 `JSON.parse()` 将其转化为可访问的对象结构: ```javascript let jsonString = '{"name": "John", "age": 30, "city":"New York"}'; let obj = JSON.parse(jsonString); console.log(obj.name); // 输出 John console.log(obj.age); // 输出 30 ``` 上述过程展示了基本的数据反序列化方式[^4]。 #### 处理嵌套结构中的删除操作 对于更复杂的情形,比如需要移除某个键对,可以直接采用赋为undefined或者利用delete关键字完成任务: ```javascript var myJson = {"person":{"firstName":"Anna","lastName":"Smith"},"age":25}; delete myJson.person.firstName; // 或者另一种写法 myJson.person.lastName = undefined; if (!myJson.person.lastName){ delete myJson.person.lastName; } console.log(myJson); /* 结果将是: { "person": {}, "age": 25 } */ ``` 这里体现了针对内部节点执行删除动作的方法[^2]。 #### 异步加载远程资源 实际开发过程中经常遇到从服务器端获取信息的需求,此时借助现代浏览器支持的标准接口如`fetch`能够轻松达成目标: ```javascript async function loadUserData() { try { let response = await fetch('https://api.example.com/users'); if(!response.ok){ throw new Error(`HTTP error! status: ${response.status}`); } let usersData = await response.json(); console.table(usersData); }catch(err){ console.error("Failed fetching user data:", err.message); } } loadUserData(); ``` 该脚本片段示范了一个完整的流程——发起网络请求、验证响应状态码以及最终把接收到的内容解释成易于使用的JS对象形式[^5]。 综上所述,无论是简单还是高级的应用场合下,掌握这些技巧都将极大地提升工作效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值