JavaScript loop through two arrays and get single array

Question

I have two arrays:

var arr = [ 
  { id: 2, username: 'bill'}, 
  { id: 3, username: 'ted' }];

var b = ["ted", "bill", "john"];

how can I get one array like this:

var finalArr = [{id: 2, username: 'bill'},{id:3, username: 'ted'}. {id:0, username: 'john'}]

If user from array b exist in arr array to add id and if not id to be 0.

I tried something like this, but not working

 var arr = [{ id: 2, username: 'bill' }, { id: 3, username: 'ted' } ]; var b = ["ted", "bill", "john"]; var finalArr = []; function userExists(username) { var a = arr.some(item => { if (item.username === username) { finalArr.push({ username, id: item.id }) } else { finalArr.push({ username, id: 0 }) } }) } b.forEach(el => { userExists(el) }) console.log(finalArr) 

Answer 1

Loop through b using map . Check if the username exists in arr using find . If yes, return the object. Else, return a new object with id: 0

 var arr = [ { id: 2, username: 'bill'}, { id: 3, username: 'ted' }]; var b = ["ted", "bill", "john"]; const output = b.map(username => { const found = arr.find(a => a.username === username); return found || { username, id: 0 } }) console.log(output) 

Answer 2

You can use map and find to construct your new array like

 var arr = [{ id: 2, username: 'bill' }, { id: 3, username: 'ted' } ]; var b = ["ted", "bill", "john"]; const finalArr = b.map(username => { const find = arr.find(o => o.username === username); return find ? find : { id: 0, username } }) console.log(finalArr) 

Answer 3

You could take a Set and filter by looking to the set and delete visited items. At the end concat missing items.

This solution repsects the order of the given data and adds the missing object in order of the names array.

 var data = [{ id: 42, username: 'foo' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }], names = ["ted", "bill", "john"], missing = new Set(names), result = data .filter(({ username }) => missing.delete(username)) .concat(Array.from(missing, username => ({ id: 0, username }))); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 4

You can do that using reduce method.

b.reduce((result, elm) => {
    const userObj = arr.find((a) => a.username === elm);
    if(userObj) {
        result.push(userObj)
    } else {
        result.push({
            id: 0,
            username: elm
        });
    }
    return result;
}, []);

Check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce for more details about reduce.

Answer 5

You can craete a dummy array for storing result and , find the existing using find . If not found create dummy object and push inside array.

 var arr = [ { id: 2, username: 'bill'}, { id: 3, username: 'ted' }]; var b = ["ted", "bill", "john"]; myArr = []; b.forEach(function(element) { var el=arr.find(x => x.username === element); if(el){ myArr.push(el); }else{ var dummy={}; dummy.id=0; dummy.username=element; myArr.push(dummy); } }); console.log(myArr);