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?

Answer 1

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;
});

Answer 2

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);

Answer 3

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;
});