Print set element in javascript

if you want to avoid traditional looping you could also use Array#from

const iterator = new Set([ 1, 1, 2, 3 ])

console.log(
  Array.from(iterator) // prints unique Array [1, 2, 3]
)

Also works better for non-browser targets like node where the output of Set is shortened

You can also achieve it by converting to an array using the spread operator and then joining, if you're looking for a one liner:

// Establishing a set 
let mySet = new Set(['a', 'b', 'c']);

// Printing the set, space delimited 
console.log(new Array(...mySet).join(' '));

From es5, the most concise way is the spread (...) operator, that works with any Iterable collection:

console.log([...mySet].join(' '));

You have a few issues:

1. You need to add (append) to the end of your innerHTML, at the moment you are overwriting the content at each iteration of your loop. Instead, you should use += to add to the content in the div.

2. You're querying the DOM (document object model) an unnecessary amount of times. You really only need to query it once. Using document.getElementById is an expensive operation to run, thus it is ideal to run it a minimum amount of times.

3. Use .textContent instead of .innerHTML. If you are not appending or adding HTML, you don't need to use .innerHTML, .textContent will do the trick. It is a good habit to get into using .textContent when only dealing with text. This can help you avoid issues such as XSS vulnerabilities (in future programs if you have user input)

See working example below (read code comments for further explanation):

const setObj1 = new Set();
for (let i = 0; i < 5; i++)
  setObj1.add(i);

const outputElement = document.getElementById('demo'); // get the element you wish to add to
let toAppend = "The set value is: "; // create a string of the content you wish to add
for (let item of setObj1.values())
  toAppend += item + ' '; // build up the content you wish to add by adding to the string
  
outputElement.textContent += toAppend; // only once the loop is done add your content to the page (the DOM)

<div id="demo"></div>

With your code, you will see only the last element.

The reason is that for each element in your Set, you are changing the content of your div inserting the new string. So at the end only the last one will be shown.

If you want to keep all of them, you can concatenate the content of your div at each iteration:

const setObj1 = new Set();
for (let i = 0; i < 5; i++)
  setObj1.add(i);

for (let item of setObj1.values())
  document.getElementById('demo').innerHTML += "The set value is: " + item + "<br/>";

<div id="demo"></div>

You can also evaluate to use appendChild if you want to append new HTML elements inside your div, rather than just changing the HTML content of your div

Only showing 4 happens due to overwriting the innerHTML of the demo div in each of the iteration.For avoiding this happen, it is needed to concatenate the values within the for loop and set innerHTML after all iteration completes.

   let endVal = "";
   for (item of setObj1.values()) {
       endVal += item + " ";
   }

   document.getElementById('demo').innerHTML = "The set value is: "+ endVal;