How can I display a single property of objects (multiple times) in an array from an axios response?

Question

I'm trying to display a specific property of multiple objects from the response of an axios call (using .innerHTML) but I can only get it to display one result of the array.

function getMusic(searchText){
    if (artistButton.checked) {
        axios.get('https://cors-anywhere.herokuapp.com/https://api.deezer.com/search/?q=artist:"'+searchText+'"')
            .then(function(response){
                console.log(response);
                var artist = response.data.data;
                for (var i = 0; i < artist.length; i++){
                    var artistResult = artist[i].artist.name;
                    console.log(artistResult);
                }
            document.getElementById("music").innerHTML = artistResult;
            });
 //tried using document.getElementById("music").innerHTML = artistResult.join(" "); but it gives me a TypeError

Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — admcfajn, Jan 30 '20 at 02:10
Your code has some mistakes. The variable artistResult is out of the scope. Considering you are using Vanilla JS, try this: for (var i = 0; i < artist.length; i++){ var artistResult = artist[i].artist.name; var node = document.createElement('li'); var artistName = document.createTextNode(artistResult); node.appendChild(artistName); document.getElementById('music').appendChild(node); } — Rodrigo, Jan 30 '20 at 02:26

score 0 · Answer 1 · answered Jan 30 '20 at 02:08

Youre artistResult variable is being overridden for each iteration of the loop. Only the last artist name is referenced by the variable when the loop ends. You can store the artist names in an array if you want to display it later.

        var artistResult = [];
        for (var i = 0; i < artist.length; i++){
            artistResult.push(artist[i].artist.name);
        }

Álvaro Tihanyi · Accepted Answer · 2020-01-30T02:16:18.063

Since you declare artistResult inside the loop, you are clearing its value and storing only one name every time. Also, it's giving you a TypeError because artistResult is a String and join() is a method of Array.

To solve the problem you can use an array to push the values and then join it:

var artistResult = []; 
for (var i = 0; i < artist.length; i++){
    artistResult.push(artist[i].artist.name)
    console.log(artistResult); 
} 
document.getElementById("music").innerHTML = artistResult.join(" ");

Or concatenate the names in a string:

var artistResult = ""; 
for (var i = 0; i < artist.length; i++){
    artistResult += " " + artist[i].artist.name
    console.log(artistResult); 
} 
document.getElementById("music").innerHTML = artistResult;

score 0 · Answer 3 · answered Jan 30 '20 at 02:21

You can try this

var searchText='A'
axios.get(`https://cors-anywhere.herokuapp.com/https://api.deezer.com/search/?q=artist:${searchText}`)
    .then(function(response){
      let artists_list=response.data.data.map(x=>`<li>${x.artist.name}</li>`).join("");
      
      document.getElementById("music").innerHTML = artists_list;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<ul id="music"></ul>

How can I display a single property of objects (multiple times) in an array from an axios response?

3 Answers3