Need to display full array as a string in an innerHTML element

Question

Ok this must have a simple solution but I'm breaking my head over this one...

I have a js code which picks up ID numbers from my HTML by class. It stores all in an array. I checked that the array is not undefined and is not empty. Sofar so good.

Now I need to get this array of ID's to display into an HTML element. The full array should just come out as a comma separated string.

The piece of code which is relevant:

    function makelink(){    
    var idArray = $(".result");
    document.getElementById("link").innerHTML = idArray;
    }
    //The result in HTML = [object Object]

When I do the following it works exactly as I want (except that I can't hardcode the array into the code like this of course)

    function makelink(){  
    var idArray = ["123", "124", "125", "126"];
    document.getElementById("link").innerHTML = idArray;
    }
    //The result in HTML = [123,124,125,126]

I read at least 4 other similar questions on Stackoverflow such as What does [object Object] mean? and Convert javascript array to string and based on that I tried:

    document.getElementById("link").innerHTML = idArray.join();

and also:

    var idArray = $(".result");
    idArray.toString();

but I could not figure out how to make it work for my code. I don't need to alert or console.log. I need my result to be output in the HTML. Please help.

Can you do console.log(idArray) right below var idArray = $(".result"); and show us a response? — DedaDev
– DedaDev, Commented Aug 2, 2020 at 15:11
do you need to show just the numbers in the array (eg: 123 124 125 126) or the whole array (eg: ["123", "124", "125", "126"]) — Rilla
– Rilla, Commented Aug 2, 2020 at 15:12
$(".result") is a collection of elements. Are you wanting to map the id's of those elements? — charlietfl
– charlietfl, Commented Aug 2, 2020 at 15:15
you can try this document.getElementById("link").innerHTML = Object.values(idArray) — Will Black
– Will Black, Commented Aug 2, 2020 at 15:16
@WillBlack That is not going to work on a jQuery object, the values themselves are objects — charlietfl
– charlietfl, Commented Aug 2, 2020 at 15:17

Will Black · Accepted Answer · 2020-08-02 16:21:35Z

0

You can try this:

function makelink(){  
  var idArray = [];
  $(".result").each(
    function(){
      idArray.push($(this).text())
    }
  );
  document.getElementById("link").innerHTML = idArray.join(', ');
}

answered Aug 2, 2020 at 16:21

Will Black

4026 silver badges21 bronze badges

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

1 Comment

tvili999 Over a year ago

In theory this is not as efficient as using functional programming functions like map, as this will take up a 0 sized array, and the push makes the array grow and in memory this will make the array be reallocated every time it exceeds its allocated memory space. It might be optimalized by the JS engine so might not matter. And also it is a good practice to use immutable data most of the times. Anyway good simple solution, no offense.

tvili999 · Accepted Answer · 2020-08-02 15:20:17Z

0

You are not displaying the array, but the jQuery object of the DOM element. You might need the map function. But this function is not enough by itself, you will still need to get the value of the result object, or the html, but that part is the easiest.

function makelink(){    
    var idArray = $(".result").map(function(item) { 
        return item.val(); 
    }).get();
    document.getElementById("link").innerHTML = idArray;
}

edited Aug 2, 2020 at 15:20

answered Aug 2, 2020 at 15:17

tvili999

1014 bronze badges

1 Comment

charlietfl Over a year ago

jQuery map() does not return an array, you need to chain additional methods to get results as array (get() or toArray())

Rilla · Accepted Answer · 2020-08-02 15:13:33Z

-1

Do this ::

function makelink() {  
    var idArray = ["123", "124", "125", "126"];
    document.getElementById("link").innerHTML = JSON.stringify(idArray);
}

answered Aug 2, 2020 at 15:13

Rilla

5446 silver badges17 bronze badges

Collectives™ on Stack Overflow

Need to display full array as a string in an innerHTML element

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related