Javascript 使用对象'；递归地将嵌套数组转换为嵌套对象；为每个数组设置s键

我想更改此数据结构：

[ { sectionName: 'SectionOne',
    ingredients: [ {ingredient: 'sugar'}, {ingredient: 'flour'} ]},
  { sectionName: 'SectionTwo',
    ingredients: [ {ingredient: 'eggs'}, {ingredient: 'water'} ] },
 ]

为此：

{ SectionOne:
       { sectionName: 'SectionOne',
         ingredients: {
           sugar: { ingredient: 'sugar' },
           flour: { ingredient: 'flour' }
          }
        },
{ SectionTwo:
       { sectionName: 'SectionTwo',
         ingredients: {
           eggs: { ingredient: 'eggs' },
           water: { ingredient: 'water' }
          }
        },

 }

换句话说，我想对每个要转换为对象的数组使用对象的键

您可以在这个页面上找到数据结构的示例 和我的尝试一起

到目前为止，使用lodash或vanillaJS，我只能转换外部数组。 我无法递归地使用u.mapKeys（）进行循环或类似操作，以获得所需的结构。我肯定我错过了一个愚蠢的观点，但我无法回避这个问题

---

非常感谢您的帮助

您可以

映射一个数组，并将对象构建得非常清晰：


const data=[
{sectionName:'SectionOne'，
配料：[{配料：'糖'}，{配料：'面粉'}]}，
{sectionName:'SectionTwo'，
配料：[{配料：'鸡蛋'}，{配料：'水'}]}，
];
const res=Object.assign（…data.map（el=>）（{//对于每个元素
[el.sectionName]：{
截面名称：el.sectionName，
成分：Object.assign（…el.Components.map（e=>（{[e.Component]：e}））//分配数组中的每个对象
}
})))
console.log（res）
console.log（res.SectionOne.Components.sugar）
您可以
映射一个数组并构建您的对象：


const data=[
{sectionName:'SectionOne'，
配料：[{配料：'糖'}，{配料：'面粉'}]}，
{sectionName:'SectionTwo'，
配料：[{配料：'鸡蛋'}，{配料：'水'}]}，
];
const res=Object.assign（…data.map（el=>）（{//对于每个元素
[el.sectionName]：{
截面名称：el.sectionName，
成分：Object.assign（…el.Components.map（e=>（{[e.Component]：e}））//分配数组中的每个对象
}
})))
console.log（res）
console.log（res.SectionOne.Components.sugar）
这里有一个使用reduce的有效解决方案。您可能可以进一步重构：

const sections = [
  { sectionName: 'SectionOne',
    ingredients:
      [
        {ingredient: 'sugar'},
        {ingredient: 'flour'}
      ]
  },
  { sectionName: 'SectionTwo',
    ingredients:
      [
        {ingredient: 'eggs'}, {ingredient: 'water'}
      ]
  },
];

const result = sections.reduce((accumulator, currentValue) => {
  const ingredientsObj = currentValue.ingredients.reduce((acc, ingredient) => {
    acc[ingredient.ingredient] = {
      ingredient: ingredient.ingredient
    };
    return acc;
  }, {});

  var sectionObject = {
    sectionName: currentValue.sectionName,
    ingredients: ingredientsObj
  }
  accumulator[currentValue.sectionName] = sectionObject;
  return accumulator;

}, {});

console.log(result);

这里有一个使用reduce的有效解决方案。您可能可以进一步重构：

const sections = [
  { sectionName: 'SectionOne',
    ingredients:
      [
        {ingredient: 'sugar'},
        {ingredient: 'flour'}
      ]
  },
  { sectionName: 'SectionTwo',
    ingredients:
      [
        {ingredient: 'eggs'}, {ingredient: 'water'}
      ]
  },
];

const result = sections.reduce((accumulator, currentValue) => {
  const ingredientsObj = currentValue.ingredients.reduce((acc, ingredient) => {
    acc[ingredient.ingredient] = {
      ingredient: ingredient.ingredient
    };
    return acc;
  }, {});

  var sectionObject = {
    sectionName: currentValue.sectionName,
    ingredients: ingredientsObj
  }
  accumulator[currentValue.sectionName] = sectionObject;
  return accumulator;

}, {});

console.log(result);

这是一个非常简洁的语法。它可以工作，但是
data.map（）
会将所有内容包装在一个数组中。喂，我还是不能给res.sectionOne.Components.sugar打电话。也许用
for..of循环
或
for
循环迭代就可以了？@frankydep我编辑了我的答案。现在，它创建了一个对象，您可以使用
res.sectionOne.contracents.sugar
访问道具。起初我没有意识到你需要一个最终的结果才能成为一个对象！干得好！我仍然无法理解为什么
.map（）
在
对象的上下文中。assing（）
没有生成数组。是因为spread运算符吗？
Object.assing（）
是否还需要目标对象？再次感谢@frankydep
data.map
创建一个对象数组，将
spread
与
..
一起放入以下对象：
Object.assign（{first data Object}，{second data Object}等）
。另外，在您的控制台中尝试
Object.assign（{a:1}）
，它可以很好地工作，创建您的对象。这是一种非常简洁的语法。它可以工作，但是
data.map（）
会将所有内容包装在一个数组中。喂，我还是不能给res.sectionOne.Components.sugar打电话。也许用
for..of循环
或
for
循环迭代就可以了？@frankydep我编辑了我的答案。现在，它创建了一个对象，您可以使用
res.sectionOne.contracents.sugar
访问道具。起初我没有意识到你需要一个最终的结果才能成为一个对象！干得好！我仍然无法理解为什么
.map（）
在
对象的上下文中。assing（）
没有生成数组。是因为spread运算符吗？
Object.assing（）
是否还需要目标对象？再次感谢@frankydep
data.map
创建一个对象数组，将
spread
与
..
一起放入以下对象：
Object.assign（{first data Object}，{second data Object}等）
。另外，在您的控制台中尝试
Object.assign（{a:1}）
——它工作正常，创建您的对象。