JavaScript物件內的回圈或映射陣列

我有一個 javascript 物件陣列，例如：

const arrayData = [
{ name: "campaign 1", date: "2022-05-13", milestones:[{name:"Planning", targetDate: "2022-05-25"},
                                                      {name:"Funding", targetDate: "2022-05-30"},
                                                      {name:"Delievery", targetDate: "2022-05-31"}]
},

{ name: "campaign 2", date: "2022-06-19", milestones:[{name:"Planning", targetDate: "2022-08-12"},
                                                      {name:"Funding", targetDate: "2022-09-01"},
                                                      {name:"Delievery", targetDate: "2022-06-08"}]
},

{ name: "campaign 3", date: "2022-07-11", milestones:[{name:"Planning", targetDate: "2022-06-13"},
                                                      {name:"Funding", targetDate: "2022-07-10"},
                                                      {name:"Delievery", targetDate: "2022-08-01"}]
},
];

我想把它轉換成這種形式：

const arrayData = [
{ name: "campaign 1", date: "2022-05-13", Planning:"2022-05-25", Funding: "2022-05-30", Delievery: "2022-05-31"},
{ name: "campaign 2", date: "2022-06-19", Planning: "2022-08-12", Funding: "2022-09-01", Delievery: "2022-06-08"},
{ name: "campaign 3", date: "2022-07-11", Planning: "2022-06-13", Funding: "2022-07-10", Delievery: "2022-08-01"}
];

我試著這樣做：

let newData = [];
for (let i in arrayData) {
        newData.push({
          campaignName: arrayData[i].campaignName,
          date: arrayData[i].date,
          arrayData[i].milestones.map(item, index)=>(
            [arrayData[i].milestones[j].name]:
            arrayData[i].milestones[j].targetedDate,
          )
        });
      }

但是，它對我不起作用。請提供它的解決方案。謝謝

uj5u.com熱心網友回復：

這將為每個物件僅迭代milestone一次屬性。那會更快。

const arrayData=[{name:"campaign 1",date:"2022-05-13",milestones:[{name:"Planning",targetDate:"2022-05-25"},{name:"Funding",targetDate:"2022-05-30"},{name:"Delievery",targetDate:"2022-05-31"}]},{name:"campaign 2",date:"2022-06-19",milestones:[{name:"Planning",targetDate:"2022-08-12"},{name:"Funding",targetDate:"2022-09-01"},{name:"Delievery",targetDate:"2022-06-08"}]},{name:"campaign 3",date:"2022-07-11",milestones:[{name:"Planning",targetDate:"2022-06-13"},{name:"Funding",targetDate:"2022-07-10"},{name:"Delievery",targetDate:"2022-08-01"}]}];

const formattedData = arrayData.map( obj => {

  const tempObj = {
    name: obj.name,
    date: obj.date
  }
  
  obj.milestones.forEach(milestone => {
    tempObj[milestone.name] = milestone.targetDate;
  });
  
  return tempObj;
});

console.log(formattedData);

uj5u.com熱心網友回復：

使用Array#map和物件解構，如以下演示所示。此演示假定里程碑元素始終按順序排列Planning, Funding, Delivery。如果順序必然不同，我將提供第二個演示，該演示適用于它們出現的任何順序。

const arrayData = [ { name: "campaign 1", date: "2022-05-13", milestones:[{name:"Planning", targetDate: "2022-05-25"}, {name:"Funding", targetDate: "2022-05-30"}, {name:"Delievery", targetDate: "2022-05-31"}] }, { name: "campaign 2", date: "2022-06-19", milestones:[{name:"Planning", targetDate: "2022-08-12"}, {name:"Funding", targetDate: "2022-09-01"}, {name:"Delievery", targetDate: "2022-06-08"}] }, { name: "campaign 3", date: "2022-07-11", milestones:[{name:"Planning", targetDate: "2022-06-13"}, {name:"Funding", targetDate: "2022-07-10"}, {name:"Delievery", targetDate: "2022-08-01"}] }],

      output = arrayData.map(
          ({milestones:[
              { targetDate:Planning },
              { targetDate:Funding },
              { targetDate:Delivery }
          ],
          ...rest}) => 
          ({...rest,Planning,Funding,Delivery})
      );
      
console.log( output );

或者 ....

您可以在下面的演示中使用Array#map和。Array#reduce這應該適用于任何訂單和里程碑的數量。

const arrayData = [ { name: "campaign 1", date: "2022-05-13", milestones:[{name:"Planning", targetDate: "2022-05-25"}, {name:"Funding", targetDate: "2022-05-30"}, {name:"Delievery", targetDate: "2022-05-31"}] }, { name: "campaign 2", date: "2022-06-19", milestones:[{name:"Planning", targetDate: "2022-08-12"}, {name:"Funding", targetDate: "2022-09-01"}, {name:"Delievery", targetDate: "2022-06-08"}] }, { name: "campaign 3", date: "2022-07-11", milestones:[{name:"Planning", targetDate: "2022-06-13"}, {name:"Funding", targetDate: "2022-07-10"}, {name:"Delievery", targetDate: "2022-08-01"}] }],

      output = arrayData.map(
          ({milestones,...rest}) => 
          ({
              ...rest,
              ...milestones.reduce(
                  (acc,{name,targetDate}) =>
                  ({...acc, [name]: targetDate}), {}
              )
          })
      );
      
console.log( output );

至于你的代碼....

1. 您引入了campaignName資料中不存在的屬性
2. Array#map您可以Array#reduce與擴展運算子結合使用，而不是使用，...如以下演示所示：

const arrayData = [ { name: "campaign 1", date: "2022-05-13", milestones:[{name:"Planning", targetDate: "2022-05-25"}, {name:"Funding", targetDate: "2022-05-30"}, {name:"Delievery", targetDate: "2022-05-31"}] }, { name: "campaign 2", date: "2022-06-19", milestones:[{name:"Planning", targetDate: "2022-08-12"}, {name:"Funding", targetDate: "2022-09-01"}, {name:"Delievery", targetDate: "2022-06-08"}] }, { name: "campaign 3", date: "2022-07-11", milestones:[{name:"Planning", targetDate: "2022-06-13"}, {name:"Funding", targetDate: "2022-07-10"}, {name:"Delievery", targetDate: "2022-08-01"}] }],

      newData = [];
      
for (let i in arrayData) {
    newData.push({
        name: arrayData[i].name,
        date: arrayData[i].date,
        ...arrayData[i].milestones.reduce(
            (acc, {name,targetDate}) =>
            ({...acc, [name]:targetDate}),{}
        )
    });           
}

console.log( newData );

uj5u.com熱心網友回復：

像這樣的東西？

arrayData.map(item => ({
    name: item.name,
    date: item.date,
    Planning: item.milestones.find(milestone => milestone.name === 'Planning')?.targetDate,
    Funding: item.milestones.find(milestone => milestone.name === 'Funding')?.targetDate,
    Delievery: item.milestones.find(milestone => milestone.name === 'Delievery')?.targetDate,
}))

標籤：javascript 节点.js 数组 反应 javascript 对象

上一篇：映射Typescript通用陣列

下一篇：在陣列中構造formData