如何將帶有對象的數組中的數據動態添加到嵌套數組中？

Question

我有這組動態獲取的數據 - This is the data I dynamically get

我的問題是如何從鍵、模式和 label 中獲取值並將它們放入這樣的嵌套 object 中 -嵌套的 object 應該是什么樣子。

我目前的代碼是

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 有我動態獲取的數據，我 map 每個都獲取密鑰，這樣我就可以給 object 屬性一個名稱。 但之后我需要得到另外 2 個（圖案和標簽）並將其放入 mergeTagsObj；

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

Answer 1

不是最優雅的解決方案，但我認為這應該可行。 不需要先創建鍵數組，您只需遍歷對象的 arr 即可。

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

Answer 2

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

Answer 3

您可以在 forEach 中添加模式和 label 以及您可能需要轉換數據的任何其他邏輯。

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)