Question

以下代码抓住＆amp;根据用户在SoundCloud上的搜索查询打印所有数组及其对象。我不需要显示每个对象，因此我继续添加切片。虽然它会切割数组的前几个字符，而不是抓住每个数组中的前几个对象。我哪里出错？

＆＃13;

function audioResults(){
    var search = document.getElementById("search").value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search, false);
	xhr.addEventListener("load", function() {
	    var listResults = xhr.response;
		var sliceResults = listResults.slice(0,9);
		document.getElementById("results").innerHTML = sliceResults;
	}, false);
	xhr.send();
}

＆＃13;

<html>
<head>
 <!-- JS -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
</head>
<body>
<input type="search" id="search" />

<button onclick="audioResults()">Search</button>

<p id="results"></p>

</body>
</html>

＆＃13;

Answer 1

listResults.slice(0,9)

这将获得listResults的前9个字符。你想要的是解析数据。

JSON.parse(listResults);

然后你可以使用Array.prototype.slice。

JSON.parse(listResults).slice(0, 9);

将它返回到字符串形式stringify it：

JSON.stringify(JSON.parse(listResults).slice(0, 9));

Answer 2

您需要parse the resulting JSON：

var listResults = JSON.parse(xhr.response);

使用你的例子：

function audioResults(){
    var search = document.getElementById("search").value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search, false);
	xhr.addEventListener("load", function() {
            // parse JSON result
	    var listResults = JSON.parse(xhr.response);
		var sliceResults = listResults.slice(0,9);
		document.getElementById("results").innerHTML = sliceResults;
	}, false);
	xhr.send();
}

<html>
<head>
 <!-- JS -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
</head>
<body>
<input type="search" id="search" />

<button onclick="audioResults()">Search</button>

<p id="results"></p>

</body>
</html>

Answer 3

如果您想使用javascript过滤结果，则必须先JSON.parse结果，然后，您可以slice，最后JSON.stringify得到一个字符串作为结果。

但是，我建议您在API请求级别过滤结果。看一下soundcloud Pagination API，您可以在请求网址中添加limit=10参数（例如：https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=Einsteins&limit=10）

如果您想访问以下页面，则会有linked_partitioning个参数。如果此参数为1，则响应数组将包含在包含collection（第一页的曲目）和next_href（指向下一页结果的链接）的对象上例如：https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=Einsteins&limit=1&linked_partitioning=1

Answer 4

当您对生成的XHR JSON字符串进行切片时，它将从前0个字符或对象开始。

对象的哪个属性是用户搜索的？

您可以获取要搜索的目标属性，然后根据该属性执行循环。

这应该有用。

function audioResults(){
    var search = document.getElementById("search").value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search, false);
    xhr.addEventListener("load", function() {
         var dataLength = listResults.length;
         for ( var ii = 0; dataLength  >= ii; ii++ ) {
             var title = listResults[ii].title;
             if (title.indexOf(search) > -1) {
                document.getElementById("results").innerHTML = listResults[ii].title + '<br />' + listResults[ii].genre title+ '<br />' + listResults[ii].description;
             }
        }Y
    }, false);
    xhr.send();
}

Answer 5

我想出来并使用for循环让它工作......

    function audioResults() {
        var search = document.getElementById("search").value;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', "https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=" + search, false);
        xhr.addEventListener("load", function () {
            // parse JSON result
            var listResults = JSON.parse(xhr.response);
            var sliceResults = listResults.slice(0, 9);
            console.log(sliceResults);
            document.getElementById("results").innerHTML = '';
            for (var x in sliceResults) {
                document.getElementById("results").innerHTML += '<a href="' + sliceResults[x].user.permalink_url + '">';
                document.getElementById("results").innerHTML += '<img src="' + sliceResults[x].user.avatar_url + '" />';
                document.getElementById("results").innerHTML += '<strong>' + sliceResults[x].user.username + '</strong>';
                document.getElementById("results").innerHTML += '</a>';
                document.getElementById("results").innerHTML += '<p><a href="' + sliceResults[x].permalink_url + '">' + sliceResults[x].title + "</a></p>";
            }
        }, false);
        xhr.send();
    }

<html>
<head>
 <!-- JS -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
</head>
<body>

<input type="search" id="search" />

<button onclick="audioResults()">Search</button>

<p id="results"></p>


</body>
</html>

抓住＆amp;从JSON数组中打印特定对象 - Javascript

5 个答案: