Question

我正在尝试使用两个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) ...同时工作。如果只有一个存在，它们各自工作，但当它们都在代码中时，它们都不起作用。

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

Answer 1

似乎API在第二次调用中没有返回song属性。但是，它似乎确实返回了program属性，这可能是合适的。我对NPR 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>

Answer 2

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

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);
    }
}

分别使用两个getJSON调用

2 个答案: