Grab & print specific objects from a JSON array - Javascript

Question

The code below grabs & prints all arrays and their objects per a user's search query on SoundCloud. I do not need every object to be displayed and thus I went ahead and added slice. Though it's slicing the first few characters of the array, rather then grabbing the first few objects in each array. Where have I gone wrong?

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

<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>

bjb568 · Accepted Answer · 2015-04-11 22:12:22Z

2

listResults.slice(0,9)

This gets the first 9 characters of listResults. What you want is to parse the data.

JSON.parse(listResults);

Then you can use Array.prototype.slice on that.

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

To return it to its string form stringify it:

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

edited Apr 11, 2015 at 22:12

answered Apr 11, 2015 at 21:46

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chaser7016 Over a year ago

Thanks! Though now with the code above and when a search is executed all I'm getting is [object, Object], [object, Object], [object, Object,] etc vs. something like "id": 13158665, "downloadable": true, "original_format": "m4a", etc....Thanks! Though now with the co

bjb568 Over a year ago

@chaser7016 Oh, you can turn it back into regular text by JSON.stringify'ing the whole thing.

Colin Brock · Accepted Answer · 2015-04-11 21:46:44Z

1

You need to parse the resulting JSON:

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

Using your example:

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>

answered Apr 11, 2015 at 21:46

Colin Brock

21.6k9 gold badges51 silver badges62 bronze badges

2 Comments

chaser7016 Over a year ago

Thanks! Though now with the code above and when a search is executed all I'm getting is [object, Object], [object, Object], [object, Object,] etc vs. something like "id": 13158665, "downloadable": true, "original_format": "m4a", etc....

Colin Brock Over a year ago

@chaser7016 That's because you're implicitly calling each of the objects' .toString() method when you write the text to the screen. You may want to consider iterating over the sliceResults (via .forEach or similar) and printing specific properties of each returned object. You can better inspect the contents of those objects by doing console.log(sliceResults); and looking in your browser's console.

Mathieu · Accepted Answer · 2015-04-11 22:31:08Z

If you want to filter the results using javascript, you have to first JSON.parse the results, then you can can slice it and finally JSON.stringify it to get a string as a result.

but, I would recommand you to filter the results at the API request level. take a look at the soundcloud Pagination API you can add a limit=10 parameter to the request URL (eg: https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=Einsteins&limit=10 )

and if you want to access the following pages, there is the linked_partitioning parameters. if this parameter is 1, the response array will be wrapped into on an object containing the collection (the tracks for the first page) and next_href (the link to the next page results) eg: https://api.soundcloud.com/tracks?client_id=1dff55bf515582dc759594dac5ba46e9&q=Einsteins&limit=1&linked_partitioning=1

andre mcgruder · Accepted Answer · 2015-04-12 00:28:41Z

When you slice the resulting XHR JSON string it is takes the first 9 characters or objects starting at 0.

Which property of the object is the user searching on?

You can grab the target property that you want to search by then performing a loop base on that.

This should work.

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

chaser7016 · Accepted Answer · 2015-04-12 01:05:05Z

I figured it out and got it working using a for loop...

    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>

Collectives™ on Stack Overflow

Grab & print specific objects from a JSON array - Javascript

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related