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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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设置session值和cookies的学习示例
2014/03/21 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JS实现div居中示例
2014/04/17 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python获取url的返回信息方法
2018/12/17 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
django配置app中的静态文件步骤
2020/03/27 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
《翻越远方的大山》教学反思
2014/04/13 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
创业计划书之养殖业
2019/10/11 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Golang Web 框架Iris安装部署
2022/08/14 Python