Javascript objects combining with Jquery?

74
June 13, 2018, at 5:10 PM

I have an issue with manipulating data in Javascript/jQuery and I could use some help.

I have an array of objects that lools like this:

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

I have another array of objects that looks like this:

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',
  }
 ];

The project field in the second object will always be one of the objects in the first array.

I then need to end up with an object that looks like this:

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",          
              }
            ]
    },
  ]

There may be several values at all stages for each project and there maybe projects with no events at all that need to be omitted from the source object.

Please can you assist?

Edit:

The background behind this is that I am pulling a list of events from a SharePoint list using SharePointPlus. This results in the ganttEvents array. I need to plug this in to the jQuery.Gantt library which requires the events to be formatted in a particular way.

jQuery.Gantt

I am sorry but i am relatively new to Javascript (Python programmer usually) I have tried different methods of doing this to no avail.

Answer 1

You can use reduce to group the array into an object. Use the concatenated values of project and category as the key. Use Object.values to convert the object into an array.

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

Without Object.values(), you can loop using 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);

READ ALSO
jQuery resizable translateX [on hold]

jQuery resizable translateX [on hold]

currently I'm facing the issue that the resizable line (that ghost line) is way offset caused by transform: translateX is there any solution for that to recalculate the current position of the cursor?

63
How to make jquery intellisense work in visualstudio for js file

How to make jquery intellisense work in visualstudio for js file

I working on HTML and JS pages (not a project)

46