How to dynamically add data from an array with objects to a nested array?

Question

I have this set of data that I get dynamically - This is the data I dynamically get

and my question is how can I get the values from the key, pattern and label and put them in a nested object like this - how should the nested object look like.

My current code is

let mergeTagsObj = {};  
  const merg = function(arr){
    const propertyDataMap = arr.map(x => x.key);
    propertyDataMap.forEach(x => {
      mergeTagsObj[x] = {} 
    });
    console.log(mergeTagsObj);
    // console.log(object);
  };
  merg(displayArr)

displayArr has the data that I dynamically get, and I map each one to get the key so I can then give the object property a name. But after that I need to get the other 2 (pattern and label) and put it in the mergeTagsObj;

ex: mergeTagsObj = {
firstName:{
name:{label}
value:{pattern}
},
...
};

you could try something like this: `let tags = arr.map(x => Object.assign({}, ({[x.key]: {name: x.label, value: x.pattern}})))` — mrJQuery, Aug 20 '21 at 15:20

score 0 · Answer 1 · answered Aug 20 '21 at 15:27

0

Not most elegant solution, but I think this should work. Don't need to create the array of keys first you can just iterate over the arr of objects.

  const merg = function(arr){
    arr.forEach(x => {
      mergeTagsObj[x.key] = {};
      mergeTagsObj[x.key]['name'] = x.label;
      mergeTagsObj[x.key]['value'] = x.pattern
    });
    console.log(mergeTagsObj);
    // console.log(object);
  };

answered Aug 20 '21 at 15:27

Brian

179
7

your answer really helped as well. Thank you for answering my questions! I appreciate it <3 – bnn16 Aug 20 '21 at 18:13

score 0 · Answer 2 · answered Aug 20 '21 at 15:33

// Given
const data = [
  {key: "firstName", pattern: "{{firstName}}", label: "First Name"},
  {key: "unsubscribeLink", pattern: "{{unsubscribeLink}}", label: "Unsubscribe Link"}
];

const tagsObject = data.reduce((obj, item) => {
  const key = item.key;
  const name = item.label;
  let value = item.pattern;
  if (key === 'unsubscribeLink') value = '<a href="{{unsubscribeLink}}">Unsubscribe</a>';

  return {...obj, [key]: {name, value}};
}, {});

console.log(tagsObject);

I really thank you for answering my questions! Thanks <3 – bnn16 Aug 20 '21 at 18:13 — bnn16, Aug 20 '21 at 18:13

Dimitri Harding · Accepted Answer · 2021-08-20T15:58:13.490

You can add the pattern and label in your forEach and any other logic that you might need to transform the data.

const data = [{key: 'firstName', pattern: "{{firstName}}", label: "First Name"}, 
              {key: 'lastName', pattern: "{{lastName}}", label: "Last Name"},
              {key: 'unsubscribeLink', pattern: "{{unsubscribeLink}}", label: "Unsubscribe Link"}
             ]

const transformDataToTagsObject = (dData) => {
  
  const dynamicData = {};

  dData.forEach((currentData, index) => {
    
    const currentKey = currentData.key
    const name = currentData.label
    let value = currentData.pattern
    
    if(currentData.key === 'unsubscribeLink'){
      value = `<a href='${value}'>Unsubscribe</a>`
     }
    
     dynamicData[currentKey] = {
      name,
      value
     }
    
  })
  
  const tagsObject = {
    tags: dynamicData
  }
   return tagsObject;
}

const finalResults = transformDataToTagsObject(data)

console.log(finalResults)

Thanks, this really helped me :) – bnn16 Aug 20 '21 at 18:12 — bnn16, Aug 20 '21 at 18:12

How to dynamically add data from an array with objects to a nested array?

3 Answers3