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的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
js实现文字截断功能
Sep 14 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
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
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php常用图片处理类
2016/03/16 PHP
PHP会话控制实例分析
2016/12/24 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
Javascript中的数学函数
2007/04/04 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
js模块加载方式浅析
2017/08/12 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python开发游戏的前期准备
2019/05/05 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
运动会广播稿500字
2014/01/28 职场文书
学校大课间活动方案
2014/01/30 职场文书
5s推行计划书
2014/05/06 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
一行Python命令实现批量加水印
2022/04/07 Python