How to list the items using "forEach" function in arrays javascript only

Question

I need to list the items with set of object arrays, i could not get it.. pls help me

<script>
var emp = [ {firstname: "raj", id:111, age:30; salary:3567},
            {firstname: "uva", id:222, age:35; salary:4567},
            {firstname: "pup", id:333, age:32; salary:7865},
            {firstname: "rav", id:444, age:33; salary:7654}];

var emplist = emp.length;

var doc = "<div>";
    for(i=0; i < emplist; i++){
        doc += "<p>" + emp[i].firstname + emp[i].id + emp[i].age + emp[i].salary + "</p>";
    }
    doc += "</div>";
    document.getElementById("demo2").innerHTML = doc;
</script>

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Pranav C Balan
– Pranav C Balan, Commented Apr 27, 2019 at 5:29
Hi i have tried for loop and i get the result with only arrays... ``` <script> var emp = ["name1", "name2", "name3", "name4", "name5"]; var emplist = emp.length; var doc = "<div>"; for(i=0; i < emplist; i++){ doc += "<p>" + emp[i] + "</p>"; } doc += "</div>"; document.getElementById("demo5").innerHTML = doc; </script>``` — syuvaraj12
– syuvaraj12, Commented Apr 27, 2019 at 5:32

Pranav C Balan · Accepted Answer · 2019-04-27 06:19:45Z

2

You can use Array#map method to iterate and generate individual p tags and Array#join method to concatenate them.

<div id=demo2></div>

<script>
  var emp = [ {firstname: "raj", id:111, age:30, salary:3567},
            {firstname: "uva", id:222, age:35, salary:4567},
            {firstname: "pup", id:333, age:32, salary:7865},
            {firstname: "rav", id:444, age:33, salary:7654}];
            
  document.getElementById("demo2").innerHTML = '<div>' +
            emp.map(empi => `<p>${empi.firstname} ${empi.id} ${empi.age} ${empi.salary}</p>`).join('') 
            + '</div>';
</script>

edited Apr 27, 2019 at 6:19

answered Apr 27, 2019 at 5:39

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

Comments

Amith · Accepted Answer · 2019-04-27 05:36:36Z

1

While defining array of objects, you have put a ; after age values.

<script>
var emp = [ {firstname: "raj", id:111, age:30, salary:3567},
            {firstname: "uva", id:222, age:35, salary:4567},
            {firstname: "pup", id:333, age:32, salary:7865},
            {firstname: "rav", id:444, age:33, salary:7654}];

var doc = "<div>";
emp.forEach(function(empi){
    doc += "<p>" + empi.firstname + empi.id + empi.age + empi.salary + "</p>";
});
doc += "</div>";
document.getElementById("demo2").innerHTML = doc;
</script>

answered Apr 27, 2019 at 5:36

Amith

7686 silver badges25 bronze badges

Comments

Maheer Ali · Accepted Answer · 2019-04-27 05:45:59Z

You can just use Object.values() and join() because you are combining all the values. And also use Template Strings to avoid repetition of +. I think using map() is better here.

var emp = [ {firstname: "raj", id:111, age:30, salary:3567}, {firstname: "uva", id:222, age:35, salary:4567}, {firstname: "pup", id:333, age:32, salary:7865}, {firstname: "rav", id:444, age:33, salary:7654}];

document.getElementById("demo2").innerHTML = emp.map(Object.values).join('<p>');

<div id="demo2"></div>

If you still want to use forEach then use below snippet

var emp = [ {firstname: "raj", id:111, age:30, salary:3567}, {firstname: "uva", id:222, age:35, salary:4567}, {firstname: "pup", id:333, age:32, salary:7865}, {firstname: "rav", id:444, age:33, salary:7654}];

var doc = "<div>";
emp.forEach(x => doc += `<p>${Object.values(x).join('')}</p>`)
doc += "<div>"
document.getElementById("demo2").innerHTML = doc;

<div id="demo2"></div>

Collectives™ on Stack Overflow

How to list the items using "forEach" function in arrays javascript only

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related