分别使用两个getJSON调用

Use two getJSON calls separately

本文关键字：两个 getJSON 调用      更新时间：2024-03-31

我试图使用两个getJSON调用来实现两个不同（但几乎相同）的目的。我是一个新手，但我能够拼凑出以下代码：

$(function() {
	var call1, call2;
	jQuery.when(
		jQuery.getJSON('https://api.composer.nprstations.org/v1/widget/517ed638e1c8d825471462ff/tracks?format=json&limit=16', function(data) {
			call1 = data;
		}),
		jQuery.getJSON('https://api.composer.nprstations.org/v1/widget/51929bfde1c8886d5ccfb1d9/tracks?format=json&limit=11', function(data) {
			call2 = data;
		})
	).then(function() {		
		if (call1.onNow.song) {
			
			var output1="<ul>";
			
			for (var i in call1.tracklist.results) {
				
				var item1 = call1.tracklist.results[i];
				
				if (item1.song.artistName && item1.song.trackName) {
					output1 += "<li>" + item1.song.trackName + "</li>";
				}
			};
			
			output1 += '</ul>';			
			document.getElementById("call1-playlist").innerHTML=output1;
		};
		
		if (call2.onNow.song) {
			
			var output2="<ul id='playlist'>";
			
			for (var i in call2.tracklist.results) {
				
				var item2 = call2.tracklist.results[i];
				
				if (item2.song.artistName && item2.song.trackName) {
					output2 += "<li>" + item2.song.trackName + "</li>";
				}
			};
			
			output2 += '</ul>';			
			document.getElementById("call2-playlist").innerHTML=output2;
		}; 
	});
	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="call1-playlist">Placeholder</div>
<div id="call2-playlist">Placeholder</div>

当我调用getJSON时，它会从两个源中提取数据。但我不能让if (call1.onNow.song) ...和if (call2.onNow.song) ...同时工作。如果只有一个存在，它们就可以工作，但当它们都在代码中时就不行了。

我想这是我所缺少的相对简单的东西。再说一次，我是一个新手，所以我不确定在代码中的哪里可以找到解决方案。

API在第二次调用中似乎没有返回song属性。然而，它似乎确实返回了可能合适的program属性。我对美国国家公共广播电台API不是很熟悉，但两首歌不会同时播放是有道理的。

只需更改：

if (call2.onNow.song)

对此：

if (call2.onNow.program)

运行下面的代码片段，看看它是否适合您的需求。

$(function() {
	var call1, call2;
	jQuery.when(
		jQuery.getJSON('https://api.composer.nprstations.org/v1/widget/517ed638e1c8d825471462ff/tracks?format=json&limit=16', function(data) {
			call1 = data;
		}),
		jQuery.getJSON('https://api.composer.nprstations.org/v1/widget/51929bfde1c8886d5ccfb1d9/tracks?format=json&limit=11', function(data) {
			call2 = data;
		})
	).then(function() {		
		if (call1.onNow.song) {
			
			var output1="<ul>";
			
			for (var i in call1.tracklist.results) {
				
				var item1 = call1.tracklist.results[i];
				
				if (item1.song.artistName && item1.song.trackName) {
					output1 += "<li>" + item1.song.trackName + "</li>";
				}
			};
			
			output1 += '</ul>';			
			document.getElementById("call1-playlist").innerHTML=output1;
		};
		
		if (call2.onNow.program) {
			var output2="<ul id='playlist'>";
			
			for (var i in call2.tracklist.results) {
				
				var item2 = call2.tracklist.results[i];
				
				if (item2.song.artistName && item2.song.trackName) {
					output2 += "<li>" + item2.song.trackName + "</li>";
				}
			};
			
			output2 += '</ul>';			
			document.getElementById("call2-playlist").innerHTML=output2;
		}; 
	});
	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="call1-playlist">Placeholder</div>
<div id="call2-playlist">Placeholder</div>

实现上述目标的一种更简洁的方法：

jQuery.getJSON('https://api.composer.nprstations.org/v1/widget/517ed638e1c8d825471462ff/tracks?format=json&limit=16', function(data) {
    callback(data, 'call1-playlist');
});
jQuery.getJSON('https://api.composer.nprstations.org/v1/widget/51929bfde1c8886d5ccfb1d9/tracks?format=json&limit=11', function(data) {
    callback(data, 'call2-playlist');
});
function callback(data, id) {
    if (data.onNow.song) {
        var $ul = $('<ul/>');
        $.each(data.tracklist.results, function () {
            if (this.song.artistName && this.song.trackName) {
                $ul.append($('<li>' + this.song.trackname + '</li>');
            }
        });
        $('#' + id).html($ul);
    }
}
相关文章：