Объединить массивы объекта с вложенными массивами объекта, используя JS, loda sh или Underscore - PullRequest
Новая
       59

Объединить массивы объекта с вложенными массивами объекта, используя JS, loda sh или Underscore

2 голосов
/ 04 февраля 2020

Я пытаюсь объединить эти 2 массива объекта с помощью библиотеки loda sh javascript, когда я выполняю объединение, свойство Subcategories, содержащее другой массив, не объединяется. это массивы для объединения 

var menu1 = [
 {
    "PageName": "Designer",
    "Category": "Designer",
    "LinkTo": "/",
    "SubCategories": []
 },
 {
    "PageName": "CMS",
    "Category": "CMS",
    "LinkTo": "",
    "SubCategories": [
        {
            "Category": "Template DOP",
            "LinkTo": "/sendoutboundmessages"
        }
    ]
}];


var menu2 = [
 {
    "PageName": "CMS",
    "Category": "CMS",
    "LinkTo": "",
    "SubCategories": [
        {
            "Category": "Cataloghi",
            "LinkTo": "/catalogs-manager"
        }
    ]
 }
];

Я пытаюсь с loda shJS таким образом 

 const merged = _(menu1) 
.keyBy('PageName')
.merge(_.keyBy(menu2, 'PageName')) 
.values() 
.value();

, но это не работает для свойства SubCategory который содержит другой массив

Текущий вывод такой: 

[
  {
    "PageName": "Designer",
    "Category": "Designer",
    "LinkTo": "/",
    "SubCategories": []
  },
  {
    "PageName": "CMS",
    "Category": "CMS",
    "LinkTo": "",
    "SubCategories": [
      {
        "Category": "Cataloghi",
        "LinkTo": "/catalogs-manager"
      }
    ]
  }
]

, и я хотел бы получить этот вывод: 

[
  {
    "PageName": "Designer",
    "Category": "Designer",
    "LinkTo": "/",
    "SubCategories": []
  },
  {
    "PageName": "CMS",
    "Category": "CMS",
    "LinkTo": "",
    "SubCategories": [
      {
        "Category": "Cataloghi",
        "LinkTo": "/catalogs-manager"
      },
      {
        "Category": "Template DOP",
        "LinkTo": "/sendoutboundmessages"
      }
    ]
  }
]

Спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Только Javascript, с использованием map и find методов 

var menu1 = [
  {
    PageName: "Designer",
    Category: "Designer",
    LinkTo: "/",
    SubCategories: []
  },
  {
    PageName: "CMS",
    Category: "CMS",
    LinkTo: "",
    SubCategories: [
      {
        Category: "Template DOP",
        LinkTo: "/sendoutboundmessages"
      }
    ]
  }
];

var menu2 = [
  {
    PageName: "CMS",
    Category: "CMS",
    LinkTo: "",
    SubCategories: [
      {
        Category: "Cataloghi",
        LinkTo: "/catalogs-manager"
      }
    ]
  },
  {
    PageName: "Devloper",
    Category: "Devloper",
    LinkTo: "/",
    SubCategories: []
  }
];

const doMerge = (data1, data2, key_name) => {
  const merged = data1.map(item => {
    const obj = data2.find(x => x[key_name] === item[key_name]);
    const res = { ...item };
    if (obj) {
      for (const [key, value] of Object.entries(obj)) {
        if (value instanceof Array) {
          res[key] = [...res[key], ...value];
        } else {
          res[key] = value;
        }
      }
    }
    return res;
  });
  const keys = merged.map(x => x[key_name]);
  const other_items = data2.filter(x => !keys.includes(x[key_name]));
  return [...merged, ...other_items];
};

console.log(doMerge(menu1, menu2, "PageName"));
1 голос
/ 04 февраля 2020

Вы можете использовать LoDa sh s mergeWith . Это то же самое, что и слияние, но оно принимает функцию настройщика, чтобы дать вам больше контроля над слиянием. Попробуйте это: 

var menu1 = [
 {
    "PageName": "Designer",
    "Category": "Designer",
    "LinkTo": "/",
    "SubCategories": []
 },
 {
    "PageName": "CMS",
    "Category": "CMS",
    "LinkTo": "",
    "SubCategories": [
        {
            "Category": "Template DOP",
            "LinkTo": "/sendoutboundmessages"
        }
    ]
}];


var menu2 = [
 {
    "PageName": "CMS",
    "Category": "CMS",
    "LinkTo": "",
    "SubCategories": [
        {
            "Category": "Cataloghi",
            "LinkTo": "/catalogs-manager"
        }
    ]
 }
];

function customizer(objValue, srcValue, propertyName) {
 if (propertyName == 'SubCategories') {
   return _.union(srcValue,objValue);
 }
}

const merged = _(menu1) 
.keyBy('PageName')
.mergeWith(_.keyBy(menu2, 'PageName'), customizer) 
.values() 
.value();

console.log('merged', merged);
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
...