Javascript对象与Jquery结合？

Question

我在处理 Javascript/jQuery 中的数据时遇到问题，我需要一些帮助。

我有一个像这样的对象数组：

var projects = [
  {title:'project1'},
  {title:'project2'},
  {title:'project3'},
];

我有另一个对象数组，如下所示：

ganttEvents = [
  {
    text: 'some text',
    start_date: '2018/06/13',
    end_date: '2018/06/14',
    id: '1',
    readonly: true,
    project: 'project1',
    category: 'scoping',
  }
  {
    text: 'some text2',
    start_date: '2018/06/14',
    end_date: '2018/06/15',
    id: '1',
    readonly: true,
    project: 'project2',
    category: 'scoping',
  }
  {
    text: 'some text3',
    start_date: '2018/06/15',
    end_date: '2018/06/16',
    id: '1',
    readonly: true,
    project: 'project2',
    category: 'design',
  }
  {
    text: 'some text4',
    start_date: '2018/06/13',
    end_date: '2018/06/14',
    id: '1',
    readonly: true,
    project: 'project2',
    category: 'scoping',
  }
  {
    text: 'some text5',
    start_date: '2018/06/14',
    end_date: '2018/06/15',
    id: '1',
    readonly: true,
    project: 'project3',
    category: 'testing',
  }
  {
    text: 'some text6',
    start_date: '2018/06/15',
    end_date: '2018/06/16',
    id: '1',
    readonly: true,
    project: 'project3',
    category: 'build',
  }
 ];

第二个对象中的项目字段将始终是第一个数组中的一个对象。

然后我需要得到一个看起来像这样的对象：

source: [
    {
    name: "project1", // a project defined in the projects array
    desc: "scoping", // the category from the ganttEvents array of objects
    values: [
              {
                to: "2018/06/13", // the start_date from the ganttEvents array of objects
                from: "2018/06/14", // the end_date from the ganttEvents array of objects
                desc: "some text", // the text from the ganttEvents array of objects
                label: "some text", // the text from the ganttEvents array of objects           
              }
            ]
    },
    {
    name: "project2", // a project defined in the projects array
    desc: "scoping", // the category from the ganttEvents array of objects
    values: [
              {
                to: "2018/06/14",
                from: "2018/06/15",
                desc: "some text2",
                label: "some text2",            
              },
              {
              to: "2018/06/13",
              from: "2018/06/14",
              desc: "some text4",
              label: "some text4",          
              },
            ]
    },
    {
    name: "project3", // a project defined in the projects array
    desc: "testing", // the category from the ganttEvents array of objects
    values: [
              {
              to: "2018/06/14",
              from: "2018/06/15",
              desc: "some text5",
              label: "some text5",          
              }
            ]
    },
    {
    name: "project3", // a project defined in the projects array
    desc: "build", // the category from the ganttEvents array of objects
    values: [
              {
              to: "2018/06/15",
              from: "2018/06/16",
              desc: "some text6",
              label: "some text6",          
              }
            ]
    },
  ]

每个项目的所有阶段都可能有多个值，并且可能有根本没有事件的项目需要从源对象中省略。

你能帮忙吗？

编辑：

这背后的背景是我正在使用 SharePointPlus 从 SharePoint 列表中提取事件列表。这会产生 ganttEvents 数组。我需要将它插入到 jQuery.Gantt 库中，该库需要以特定方式格式化事件。

jQuery.Gantt

我很抱歉，但我对 Javascript（通常是 Python 程序员）比较陌生，我尝试了不同的方法来做这件事，但无济于事。

Answer 1

您可以使用reduce 将数组分组为一个对象。使用项目和类别的连接值作为键。使用Object.values将对象转化为数组。

var ganttEvents = [{"text":"some text","start_date":"2018/06/13","end_date":"2018/06/14","id":"1","readonly":true,"project":"project1","category":"scoping"},{"text":"some text2","start_date":"2018/06/14","end_date":"2018/06/15","id":"1","readonly":true,"project":"project2","category":"scoping"},{"text":"some text3","start_date":"2018/06/15","end_date":"2018/06/16","id":"1","readonly":true,"project":"project2","category":"design"},{"text":"some text4","start_date":"2018/06/13","end_date":"2018/06/14","id":"1","readonly":true,"project":"project2","category":"scoping"},{"text":"some text5","start_date":"2018/06/14","end_date":"2018/06/15","id":"1","readonly":true,"project":"project3","category":"testing"},{"text":"some text6","start_date":"2018/06/15","end_date":"2018/06/16","id":"1","readonly":true,"project":"project3","category":"build"}];

var result = Object.values(ganttEvents.reduce((c, v) => {
  let k = v.project + "-" + v.category;
  c[k] = c[k] || {name: v.project,desc: v.category,values: []};
  c[k].values.push({to: v.end_date,from: v.start_date,desc: v.text,label: v.text});
  return c;
}, {}));

console.log(result);

---

没有Object.values()，你可以使用for循环

var ganttEvents = [{"text":"some text","start_date":"2018/06/13","end_date":"2018/06/14","id":"1","readonly":true,"project":"project1","category":"scoping"},{"text":"some text2","start_date":"2018/06/14","end_date":"2018/06/15","id":"1","readonly":true,"project":"project2","category":"scoping"},{"text":"some text3","start_date":"2018/06/15","end_date":"2018/06/16","id":"1","readonly":true,"project":"project2","category":"design"},{"text":"some text4","start_date":"2018/06/13","end_date":"2018/06/14","id":"1","readonly":true,"project":"project2","category":"scoping"},{"text":"some text5","start_date":"2018/06/14","end_date":"2018/06/15","id":"1","readonly":true,"project":"project3","category":"testing"},{"text":"some text6","start_date":"2018/06/15","end_date":"2018/06/16","id":"1","readonly":true,"project":"project3","category":"build"}];

var temp = ganttEvents.reduce((c, v) => {
  let k = v.project + "-" + v.category;
  c[k] = c[k] || {name: v.project,desc: v.category,values: []};
  c[k].values.push({to: v.end_date,from: v.start_date,desc: v.text,label: v.text});
  return c;
}, {});

var result = [];
for (var key in temp) result.push(temp[key]);

console.log(result);