js获取json中key所对应的value值的简单方法


Posted in Javascript onJune 17, 2020

实例如下:

<script type="text/javascript"> 
 getJson('age'); 
 
function getJson(key){ 
 var jsonObj={"name":"傅红雪","age":"24","profession":"刺客"}; 
 
 
 //1、使用eval方法  
 var eValue=eval('jsonObj.'+key); 
 alert(eValue); 
 
 
 //2、遍历Json串获取其属性 
 for(var item in jsonObj){ 
  if(item==key){ //item 表示Json串中的属性,如'name' 
   var jValue=jsonObj[item];//key所对应的value 
   alert(jValue); 
  } 
 } 
 
 
 //3、直接获取 
 alert(jsonObj[''+key+'']); 
} 
</script>

通过上边三种方法就可以取到json中key对应的值

用js方式取得接口里面json数据的key和value值

大家在实际操作中难免遇到对接口的问题,想必对一些小白来说取得里面想要是数据也是很是头疼,那么接下来我会结合接口实际情况教大家怎么取得里面相应的数据

接口数据例如:(数据为 模拟数据,json格式)

{
  "month": {
    "monthly": ["2018年4月", "2018年5月"]
  },
  "nameAndRateOperation": {
    "济南华阳炭素有限公司": ["91.67", "91.67"],
    "济南万瑞炭素有限责任公司": ["84", "84"],
    "济南龙山炭素有限公司": ["85.71", "85.71"],
    "德州欧莱恩永兴碳素有限公司": ["70", "80"],
    "德州永兴碳素有限公司": ["90", "90"],
    "德州乾海碳素有限公司": ["70", "75"],
    "济南海川投资集团有限公司": ["81.25", "81.25"],
    "济南汇丰炭素有限公司": ["86", "86"],
    "山东金利达碳素有限公司": ["86.68", "80"],
    "济南澳海炭素有限公司": ["85", "85"]
  },
  "nameAndYield": {
    "济南华阳炭素有限公司": ["1.2", "1.2"],
    "济南万瑞炭素有限责任公司": ["4", "4"],
    "济南龙山炭素有限公司": ["2.4", "2.4"],
    "德州欧莱恩永兴碳素有限公司": ["0.8", "1"],
    "德州永兴碳素有限公司": ["0.67", "0.5"],
    "德州乾海碳素有限公司": ["0.2", "0.25"],
    "济南海川投资集团有限公司": ["1.6", "1.6"],
    "济南汇丰炭素有限公司": ["0.8", "0.8"],
    "山东金利达碳素有限公司": ["2", "2.5"],
    "济南澳海炭素有限公司": ["4.33", "4.5"]
  },
  "nameAndDateTime": {
    "济南华阳炭素有限公司": ["2018年4月", "2018年5月"],
    "济南万瑞炭素有限责任公司": ["2018年4月", "2018年5月"],
    "济南龙山炭素有限公司": ["2018年4月", "2018年5月"],
    "德州欧莱恩永兴碳素有限公司": ["2018年4月", "2018年5月"],
    "德州永兴碳素有限公司": ["2018年4月", "2018年5月"],
    "德州乾海碳素有限公司": ["2018年4月", "2018年5月"],
    "济南海川投资集团有限公司": ["2018年4月", "2018年5月"],
    "济南汇丰炭素有限公司": ["2018年4月", "2018年5月"],
    "山东金利达碳素有限公司": ["2018年4月", "2018年5月"],
    "济南澳海炭素有限公司": ["2018年4月", "2018年5月"]
  },
  "regionAndCompany": {
    "华东": ["德州欧莱恩永兴碳素有限公司", "德州乾海碳素有限公司", "德州永兴碳素有限公司", "山东金利达碳素有限公司", "济南澳海炭素有限公司", "济南海川投资集团有限公司", "济南华阳炭素有限公司", "济南汇丰炭素有限公司", "济南龙山炭素有限公司", "济南万瑞炭素有限责任公司"]
  },
  "nameAndCapacity": {
    "济南华阳炭素有限公司": ["6", "6"],
    "济南万瑞炭素有限责任公司": ["5", "5"],
    "济南龙山炭素有限公司": ["7", "7"],
    "德州欧莱恩永兴碳素有限公司": ["30", "30"],
    "德州永兴碳素有限公司": ["20", "20"],
    "德州乾海碳素有限公司": ["20", "20"],
    "济南海川投资集团有限公司": ["8", "8"],
    "济南汇丰炭素有限公司": ["10", "10"],
    "山东金利达碳素有限公司": ["15", "15"],
    "济南澳海炭素有限公司": ["10", "10"]
  },
  "storageWithCompany": {
    "济南华阳炭素有限公司": ["0.8", "0.8"],
    "济南万瑞炭素有限责任公司": ["3.2", "3.2"],
    "济南龙山炭素有限公司": ["2.2", "2.2"],
    "德州欧莱恩永兴碳素有限公司": ["1.2", "1.2"],
    "德州永兴碳素有限公司": ["0.5", "0.5"],
    "德州乾海碳素有限公司": ["0.15", "0.15"],
    "济南海川投资集团有限公司": ["1", "1"],
    "济南汇丰炭素有限公司": ["0.5", "1"],
    "山东金利达碳素有限公司": ["1.5", "1.5"],
    "济南澳海炭素有限公司": ["2.5", "2.5"]
  }
}

json数据

获取代码

//取出来所有的地区:华南华北....
            for (var key in data.regionAndCompany) {
              region.push(key);
            }
            // console.log(region)
            
            //接口取出来的仓储的数组
            for (key in data.storageWithCompany) {
              storageWithCompany.push(data.storageWithCompany[key])
            }
            // console.log(storageWithCompany)

            // //接口取出来的产能的数组
            // for(key in data.nameAndCapacity){
            //   capacity.push(data.nameAndCapacity[key])
            // }
            // // console.log(capacity)

            //接口取出来的开工率的数组
            for (key in data.nameAndRateOperation) {
              rateOperation.push(data.nameAndRateOperation[key])
            }
            // console.log(rateOperation)

            //全部的公司名字
            for (key in data.nameAndRateOperation) {
              companyRateOperation.push(key);
            }
            // console.log(companyRateOperation)
            
            //全部的时间数据,二维数组
            for (var key in data.nameAndDateTime) {
              date.push(data.nameAndDateTime[key])
            }
            // console.log(date)
            
            //全部的产量数组,二维,每个公司的产量是一个数组
            for (var key in data.nameAndYield) {
              yield.push(data.nameAndYield[key])
            }
            // console.log(yield)

再放上网上的方法

js中获取object类型里键值的方法

最近遇到一个问题:

var obj = {"name1":"张三","name2":"李四"};
var key = "name1";
var value = obj.key;//得到了"undefined"
value = obj.name1;//得到了"张三"

其实我是想动态给key赋值,然后得到key为多少所对就的值。但这种做法行不通,obj.key会去找obj下key为"key"所对应的值,结果当然是找不到喽。
于是,我想到了js中遍历对象属性的方法:

function printObject(obj){
	//obj = {"cid":"C0","ctext":"区县"};
	var temp = "";
	for(var i in obj){//用javascript的for/in循环遍历对象的属性
		temp += i+":"+obj[i]+"\n";
	}
	alert(temp);//结果:cid:C0 \n ctext:区县
}

这样,就可以清楚的知道js中一个对象的key和value分别是什么了。
回到刚才的问题,怎么动态给key赋值,然后以obj.key的方式得到对应的value呢?
其实以上printObject中有提示,那就是用obj[key]的方法,key可以是动态的,这样就解决了我上面提出的问题了。
最后说一下,还有一个方法也可以,那就是:eval("obj."+key)。

总结:

js中想根据动态key得到某对象中相对应的value的方法有二:

一、var key = "name1";var value = obj[key];
二、var key = "name1";var value = eval("obj."+key);

以上这篇js获取json中key所对应的value值的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
vue v-model动态生成详解
Jun 30 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
ng2学习笔记之bootstrap中的component使用教程
Mar 09 #Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 #Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 #Javascript
js实现年月日表单三级联动
Apr 17 #Javascript
js实现3D图片展示效果
Mar 09 #Javascript
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php 传值赋值与引用赋值的区别
2010/12/29 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
JS中的BOM应用
2018/02/02 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python实现猜拳游戏项目
2020/11/30 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
关于随地扔垃圾的检讨书
2014/09/30 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle