CODEWITHSUNDEEP
javascriptarraysdictionaryfilterreduce
user3172224
user3172224

Reputation: 83

Want to achieve functionality by using Javascripts map,reduce,foreach,filter methods

Please help me to write better code.

Suppose I have a JavaScript array like below:

var students = [
    { firstname: "stud1", lastname: "stud2", marks: "60" },
    { firstname: "stud3", lastname: "stud4", marks: "30" },
    { firstname: "stud5", lastname: "stud6", marks: "70" },
    { firstname: "stud7", lastname: "stud8", marks: "55" },
    { firstname: "stud9", lastname: "stud10", marks: "20" },
];

On page I want to show data in two parts, 1)Students who got marks >= 40 2)Students who got marks < 40

By using for loop I done this functionality easily as below. 

var data = "";var data1 = "";
for (var i = 0; i < students.length; i++ )
{
    if(students.marks >= 40){
        data += = students.firstname + " " + students.lastname; //actual data in html div tag
        ....
    }else{
            data1 += = students.firstname + " " + students.lastname;
    }
}

I want to achieve same functionality by using JavaScript methods like map, reduce, foreach, filter etc. (want to improve my JavaScript knowledge)

Don't know exactly which method is useful for such functionality.

Used map method and tried to display data, but there is a trailing , at the end of each object/array.

Can anyone please help/guide me to write proper code?

Upvotes: 0

Views: 67

Answers (2)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

Here is solution using filter and forEach methods, using callback functions.

See references here :

var students = [
    { firstname: "stud1", lastname: "stud2", marks: "60" },
    { firstname: "stud3", lastname: "stud4", marks: "30" },
    { firstname: "stud5", lastname: "stud6", marks: "70" },
    { firstname: "stud7", lastname: "stud8", marks: "55" },
    { firstname: "stud9", lastname: "stud10", marks: "20" },
];
students.filter(function(item){
    return item.marks>=40;  
}).forEach(function(item){
    div=document.getElementById('persons');
    div.innerHTML+=item.firstname+' '+item.lastname+'<br>';
});
<div id="persons"></div>

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386550

You could use a single loop and add the information with predicate as index. Later join the elements for getting a sting for each element.

var students = [{ firstname: "stud1", lastname: "stud2", marks: "60" }, { firstname: "stud3", lastname: "stud4", marks: "30" }, { firstname: "stud5", lastname: "stud6", marks: "70" }, { firstname: "stud7", lastname: "stud8", marks: "55" }, { firstname: "stud9", lastname: "stud10", marks: "20" }], 
    predicate = function (o) { return o.marks >= 40; },
    result = [[], []];      

students.forEach(function (a) {
    result[+predicate(a)].push(a.firstname + ' ' + a.lastname);
});
result = result.map(function (a) { return a.join(', '); });

console.log(result);

Upvotes: 0

Related Questions