compare two arrays based on a id and return a new array based on values

Question

Trying to loop over two arrays and finding the codes for each, I might be missing some part. I need to construct a new array with this values, each id can be multiple times in the arrayB. Based on id in first array we have to match the id in a second array (arrayA) and get code

let arrayA=[
    {"breadcrumb":{id: "abdc4051"}, type:"details"},
    {"breadcrumb":{id: "abdc4052"}, type:"details"},

    let arrayB=[
    {"breadcrumb": {id: "abdc4051",code: "mike", length:"short"}},
    {"breadcrumb": {id: "abdc4051", code: "pohan", length:"long"}}, {"breadcrumb": {id: "abdc4052", code: "junior", length:"short"}}]

    let arrayC = [];
    // output expected
[{"id":"abdc4051", shortLength: "mike", longLength:"pohan"}, {"id":"abdc4052", shortLength: "Junior", longLength:"-"}]
    // tried this
    function isBiggerThan10(element, index, array) {
      return element > 10;
    }

    arrayA.forEach(function(element){
      arrayC.push({
      id:element.id,
      firstName:(arrayB.find(
        e => e.attributes.code==="mike")).breadCrumbs.shortLength,
      lastName:(arrayB.find(
        e => e.code==="pohan")).breadCrumbs.longlength
      })
    });

    console.log(arrayC);

Answer 1

Here's one solution using the built in array methods. The steps are:

For each item in arrayA , perform the following:

• Find all items in arrayB that have the same ID (using .filter ).
• Combine all those results into a single object, using default "-" for first and last name if not present (using .reduce ).
• Put that into the results array (handled by using .map on arrayA in the first place).

 let arrayA = [ {"breadcrumb":{id: "abdc4051"}, type:"details"}, {"breadcrumb":{id: "abdc4052"}, type:"details"}, ] let arrayB = [ {"breadcrumb": {id: "abdc4051", firstName: "mike"}}, {"breadcrumb": {id: "abdc4051", lastName: "pohan"}}, {"breadcrumb": {id: "abdc4052", firstName: "junior"}}, ] // output expected // [ // {"id":"abdc4051", firstName: "mike", lastName:"pohan"}, // {"id":"abdc4052", firstName: "Junior", lastName:"-"}, // ] const result = arrayA.map(itemA => { return arrayB .filter(itemB => itemB.breadcrumb.id === itemA.breadcrumb.id) .reduce((combo, item) => ({...combo, ...item.breadcrumb}), {firstName: "-", lastName: "-"}) }); console.log(result); 

EDIT: Per edited question, you can modify the reduce function to see if the combo has firstCode set or not. If it does, then put the next code under the key lastCode , otherwise keep it as firstCode . This will base the first/last code on the order they appear in arrayB :

 let arrayA = [ {"breadcrumb":{id: "abdc4051"}, type:"details"}, {"breadcrumb":{id: "abdc4052"}, type:"details"}, ] let arrayB = [ {"breadcrumb": {id: "abdc4051", code: "mike"}}, {"breadcrumb": {id: "abdc4051", code: "pohan"}}, {"breadcrumb": {id: "abdc4052", code: "junior"}}, ] // output expected // [ // {"id":"abdc4051", firstCode: "mike", lastCode:"pohan"}, // {"id":"abdc4052", firstCode: "Junior", lastCode:"-"}, // ] const result = arrayA.map(itemA => { return arrayB .filter(itemB => itemB.breadcrumb.id === itemA.breadcrumb.id) .reduce((combo, item) => ({...combo, [combo.firstCode === "-" ? "firstCode" : "lastCode"]: item.breadcrumb.code, id: itemA.breadcrumb.id}), {firstCode: "-", lastCode: "-"}) }); console.log(result); 

EDIT 2: Per second edit, you can again modify the reduce to suit your needs:

 let arrayA = [ {"breadcrumb":{id: "abdc4051"}, type:"details"}, {"breadcrumb":{id: "abdc4052"}, type:"details"}, ] let arrayB = [ {"breadcrumb": {id: "abdc4051", code: "mike", length: "short"}}, {"breadcrumb": {id: "abdc4051", code: "pohan", length: "long"}}, {"breadcrumb": {id: "abdc4052", code: "junior", length: "short"}}, ] // output expected // [ // {"id":"abdc4051", shortLength: "mike", longLength:"pohan"}, // {"id":"abdc4052", shortLength: "junior", longLength:"-"}, // ] const result = arrayA.map(itemA => { return arrayB .filter(itemB => itemB.breadcrumb.id === itemA.breadcrumb.id) .reduce((combo, item) => ({...combo, [item.breadcrumb.length + "Length"]: item.breadcrumb.code, id: itemA.breadcrumb.id}), {shortLength: "-", longLength: "-"}) }); console.log(result); 

Answer 2

Start a chain with arrayB . Use _.map() to get the content of breadcrumb , _.groupBy() by id . Use _.pick() with the ids of arrayA to get the groups you want. Map each group to required form using _.transform() :

 const arrayA=[{"breadcrumb":{"id":"abdc4051"},"type":"details"},{"breadcrumb":{"id":"abdc4052"},"type":"details"}]; const arrayB=[{"breadcrumb":{"id":"abdc4051","code":"mike","length":"short"}},{"breadcrumb":{"id":"abdc4051","code":"pohan","length":"long"}},{"breadcrumb":{"id":"abdc4052","code":"junior","length":"short"}}]; const result = _(arrayB) .map('breadcrumb') // unwrap breadcrumb .groupBy('id') .pick(arrayA.map((o) => _.get(o, 'breadcrumb.id'))) // get all groups that match arrayA ids .map((g, key) => _.transform(g, (acc, v) => { // transform each group to the requested form acc[`${v.length}Length`] = v.code; }, { key, shortLength: '-', longLength: '-' })) .value(); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>