jq在返回的json数据调用路径接入变量、javascript JSON路径中的变量、jq JSON路径中的变量

jq在返回的json数据调用路径接入变量、javascript – JSON路径中的变量

先看返回的数据结构，红框是我们接下来要用变量来代替的内容：

我的想法是定义一个数组，然后再循环数组的元素去替换掉里面的key，从而获得里面的数据：

这里补充一个判断返回json数据里面是否含有某key的知识点：

//返回的data数据结构
data = {
    name: 'a',
    addr: 'b',
};
 //判断data是否存在某key
console.log('name' in data);   // true
console.log('addr' in data);   // true
console.log('hello' in data);  // false

语法：("key" in obj) //obj为对象类型

初始版本代码：

for (var i = 0; i < videolist.length; i++) {
if (('default' in res.items[0].snippet.thumbnails)) {
							$(".video-list li").append(
								'<p><img class="vtdefault" src="' + res.items[0].snippet.thumbnails.default.url +
								'" width="' + res.items[0].snippet.thumbnails.default.width + '" height="' + res
								.items[0].snippet.thumbnails.default.height + '"/></p>')
						}
						if (('high' in res.items[0].snippet.thumbnails)) {
							$(".video-list li").append(
								'<p><img class="vthigh" src="' + res.items[0].snippet.thumbnails.high
								.url + '" width="' + res.items[0].snippet.thumbnails.high.width +
								'" height="' + res.items[0].snippet.thumbnails.high.height + '"/></p>')
						}
						if (('maxres' in res.items[0].snippet.thumbnails)) {
							$(".video-list li").append(
								'<p><img class="vtmaxres" src="' + res.items[0].snippet.thumbnails
								.maxres.url + '" width="' + res.items[0].snippet.thumbnails.maxres
								.width + '" height="' + res.items[0].snippet.thumbnails.maxres.height +
								'"/></p>')
						}
						if (('medium' in res.items[0].snippet.thumbnails)) {
							$(".video-list li").append(
								'<p><img class="vtmedium" src="' + res.items[0].snippet.thumbnails
								.medium.url + '" width="' + res.items[0].snippet.thumbnails.medium
								.width + '" height="' + res.items[0].snippet.thumbnails.medium
								.height + '"/></p>')
						}
						if (('standard' in res.items[0].snippet.thumbnails)) {
							$(".video-list li").append(
								'<p><img class="vtstandard" src="' + res.items[0].snippet
								.thumbnails.standard.url + '" width="' + res.items[0].snippet
								.thumbnails.standard.width + '" height="' + res.items[0].snippet
								.thumbnails.standard.height + '"/></p>')
						}
						}

这样子虽然是实现了想要的效果，但是看着代码很是不雅，看到代码中只是中间的thumbnails.medium的medium这个地方变动。此刻直觉告诉我可以循环出来，然后说干就干：

var shuxing = ["default","high","maxres","medium","standard"];//定义了thumbnails下面的相关key
						for(var j=0;j<shuxing.length;j++){
						if ((shuxing[j] in res.items[0].snippet.thumbnails)) {
								$(".video-list li").append(
								'<img class="vt'+shuxing[j]+'" src="' + res.items[0].snippet.thumbnails.shuxing[j].url +
								'" width="' + res.items[0].snippet.thumbnails.shuxing[j].width + '" height="' + res
								.items[0].snippet.thumbnails.shuxing[j].height + '"/>')
						}
						}

一顿操作猛如虎啊，由于先入为主的思想然后就直接把变量用.shuxing[j]的模式接到里面去，详情以上代码。然后跑一下，Excuse me？报错了TypeError:无法读取未定义的属性“0”！！！

然后查了很久，由于很多时候返回的接口数据都是按需返回，所以很多时候都不用去修改调用地址，所以关于接口数据在前端调用时要修改路径的情况很少很少，文章也非常少，今日遇到了写一下出来方便大家！

最终版：

var shuxing = ["default","high","maxres","medium","standard"];
						for(var j=0;j<shuxing.length;j++){
						if ((shuxing[j] in res.items[0].snippet.thumbnails)) {
								$(".video-list li").append(
								'<img class="vt'+shuxing[j]+'" src="' + res.items[0].snippet.thumbnails[shuxing[j]].url +
								'" width="' + res.items[0].snippet.thumbnails[shuxing[j]].width + '" height="' + res
								.items[0].snippet.thumbnails[shuxing[j]].height + '"/>')
						}
						}

其实就是将thumbnails.shuxing[j] 改成 thumbnails[shuxing[j]]就可以了；

运行结果：

到此，问题算是解决了，此次记录方便以后查阅！

本人才疏学浅，如有错漏之处请不吝赐教！非常感谢！