Javascript: Map values of two arrays in a new array

Question

I have two arrays of objects, that look like this:

const data = [
  {
    id: 1,
    condition: 1,
    helpers: [{id: 1, condition: null}, {id: 2, condition: 2}]
  },
  {
    id: 2,
    condition: null,
    helpers: [{id: 1, condition: 1}, {id: 2, condition: null}]
  }
]

const conds = [
  {
    id: 1,
    conditions: {
       rules: ['test', 'foo']
    }
  },
  {
    id: 2,
    conditions: {
       rules: ['#hashtag', 'foo']
    }
  }
]

What I try to achieve is, that I want to replace the condition values of the data array with the ones in the conds array.

My solution, which does not work quite well looks like this:

let newArray = [];

data.forEach(obj => {
        conds.forEach(cond => {
            if (obj.condition) {
                if (obj.condition === cond.id) {
                    obj.condition = cond.conditions.rules;
                    newArray.push(obj);
                }
            } else {
                obj.helpers.forEach(h => {
                    if (h.condition && h.condition === cond.id) {
                        h.condition = cond.conditions.rules;
                        newArray.push(obj);
                    }
                });
            }
        })
    });

I feel like I am pretty close to the solution since my newArray contains the changes properties, but not for the last item inside of helpers, whereas the condition property is still 2.

The output should look like this:

[
  {
     id: 1
     condition: ['test', 'foo'],
     helpers: [{id: 1, condition: null}, {id: 2, condition: ['#hashtag', 'foo']}]
  },
  {
     id: 2
     condition: null,
     helpers: [{id: 1, condition: ['test', 'foo']}, {id: 2, condition: null}]
  },
]

What am I missing here?

This looks a lot like stackoverflow.com/q/46849286/215552. You just need to loop over data, get helpers, and do the merge outlined in the answers to the question I've linked to. — Heretic Monkey
– Heretic Monkey, Commented Oct 26, 2018 at 14:56

wasddd_ · Accepted Answer · 2018-10-27 17:55:36Z

2

Got it working:

const finalData = data.map(dataItem => {
  dataItem.condition = dataItem.condition ? rulesMap[dataItem.condition] : null;
  dataItem.helpers.map(item => {
    item.condition = item.condition ? rulesMap[item.condition] : null
  })
  return dataItem;
});

answered Oct 27, 2018 at 17:55

wasddd_

1,0483 gold badges12 silver badges21 bronze badges

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

Comments

Bruno João · Accepted Answer · 2018-10-26 15:20:16Z

const data = [
  {
    id: 1,
    condition: 1,
    helpers: [{id: 1, condition: null}, {id: 2, condition: 2}]
  },
  {
    id: 2,
    condition: null,
    helpers: [{id: 1, condition: 1}, {id: 2, condition: null}]
  }
]

const conds = [
  {
    id: 1,
    conditions: {
       rules: ['test', 'foo']
    }
  },
  {
    id: 2,
    conditions: {
       rules: ['#hashtag', 'foo']
    }
  }
]

// START SOLUTION

const rulesMap = conds.reduce((map, condition) => {
    map[condition.id] = condition.conditions.rules;
    return map;
}, {});

const finalData = data.map(dataItem => {
    dataItem.condition = dataItem.condition ? rulesMap[dataItem.condition] : null;
    return dataItem;
});

// END SOLUTION

console.log(finalData);

Create a map of conditions:

const rulesMap = conds.reduce((map, condition) => {
    map[condition.id] = condition.conditions.rules;
    return map;
}, {});

Get the new data list with condition rules replaced:

const finalData = data.map(dataItem => {
    dataItem.condition = dataItem.condition ? rulesMap[dataItem.condition] : null;
    return dataItem;
});

I've just changed the map constructor to use less memory. rulesMap make smore sense here as we do not care about other properties.
hey @Bruno - this is unfortunately not the solution as I have expected. Please see the expected output in my question - actually your solution returns the same as my version. :/ The condition inside of the helpers array should also be mapped to the conditions.
Works with this logic using your rulesmap: const finalData = data.map(dataItem => { dataItem.condition = dataItem.condition ? rulesMap[dataItem.condition] : null; dataItem.helpers.map(item => { item.condition = item.condition ? rulesMap[item.condition] : null }) return dataItem; });

Zakaria Acharki · Accepted Answer · 2018-10-26 16:01:50Z

Loop through the data array using forEach get the id then filter the conds array with it using find() to get the related conditions.rules like:

data.forEach(function(item) {
    item.condition = conds.find(x => x.id === item.id).conditions.rules;
});

Working fiddle:

const data = [{
    id: 1,
    condition: 1,
    helpers: [{id: 1, condition: null}, {id: 2, condition: 2}]
  },{
    id: 2,
    condition: null,
    helpers: [{id: 1, condition: 1}, {id: 2, condition: null}]
}];

const conds = [{
    id: 1,
    conditions: {
       rules: ['test', 'foo']
    }
  },{
    id: 2,
    conditions: {
       rules: ['#hashtag', 'foo']
    }
}];

data.forEach(function(item) {
  item.condition = conds.find(x => x.id === item.id).conditions.rules;
});

console.log(data);

Every time you use find, inside the loop, you create another loop. Imagine two giant arrays, it will take forever to finish. I think mapping the conditions is the less expensive way of doing it as I wrote in my answer.
hey @zakaria, unfortunately this is not a working example. The conditions inside of the helpers array should also be mapped to the conditions.

Collectives™ on Stack Overflow

Javascript: Map values of two arrays in a new array

3 Answers 3

Comments

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Linked

Related