Error displaying Gantt chart in laravel - javascript

I am trying to display tasks for each project using a Gantt chart. Unfortunately, I can only get the last project (with tasks) to show. It ignores other projects. I have included a link to the fiddle I am using for this example. What am I doing wrong here? This is my Javascript code:
var data = [
{
"project": "edo",
"tasks": [
{
"created_at": "2018-01-29 18:24:05",
"due_date": "2018-01-03 00:00:00",
"name": "new task"
},
{
"created_at": "2018-02-05 15:50:52",
"due_date": "2018-02-14 00:00:00",
"name": "new task1"
}
]
},
{
"project": "srgra",
"tasks": [
{
"created_at": "2018-02-05 15:51:29",
"due_date": "2018-02-16 00:00:00",
"name": "new textfield1"
},
{
"created_at": "2018-02-05 15:51:41",
"due_date": "2018-02-19 00:00:00",
"name": "new textfield2"
}
]
},
{
"project": "olotu project",
"tasks": [
{
"created_at": "2018-02-05 15:49:30",
"due_date": "2018-02-22 00:00:00",
"name": "new button"
},
{
"created_at": "2018-02-05 15:49:46",
"due_date": "2018-02-15 00:00:00",
"name": "new button2"
}
]
}
];
var today = new Date(),
day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
//console.log(data.length);
for(var i = 0; i < data.length; i++) {
var project = data[i].project;
var tasks = data[i].tasks;
//console.log(project);
var final = [];
for(var j=0; j < tasks.length; j++) {
final.push({
taskName: tasks[j].name,
start: today - 2 * day,
end: today + 14 * day
});
}
}
// THE CHART
Highcharts.ganttChart('analysis', {
title: {
text: 'Gantt Chart Test'
},
xAxis: {
currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
},
series: [{
name: project,
data: final
}]
});
Here is the fiddle I am following: https://jsfiddle.net/larsac07/t0r8qz9p/

Problem is where you define final variable. In your code, final variable is cleared (var final=[]) for every element in the data array:
for(var i = 0; i < data.length; i++) {
var project = data[i].project;
var tasks = data[i].tasks;
//console.log(project);
var final = []; // <---- this is wrong ---->
for(var j=0; j < tasks.length; j++) {
final.push({
taskName: tasks[j].name,
start: today - 2 * day,
end: today + 14 * day
});
}
}
It should be defined before the for-loop:
var final = []; // This will work
for(var i = 0; i < data.length; i++) {
var project = data[i].project;
var tasks = data[i].tasks;
//console.log(project);
for(var j=0; j < tasks.length; j++) {
final.push({
taskName: tasks[j].name,
start: today - 2 * day,
end: today + 14 * day
});
}
}

Related

Array Push only pushing last value of array

I want to update array in object for each employeeID.
My "selected" array has the employeeID's to add.
The function adds the same time and jobs for all employees but after each iteration all the emplyeeIDs are the last employeeID that was pushed.
selected = [ "01PILGAR", "01DERREX", "01SANJAC" ]
updatePersonnelTime() {
console.log("updatePersonnelTime", this.time);
var newtime = this.time;
newtime.controlDateTime = new Date();
if(!this.currentJob.time){
this.currentJob.time = [];
}
for (let i=0; i < this.selected.length; i++){
newtime.employeeID = this.selected[i];
console.log('this.selected[i]: ', this.selected[i]);
this.currentJob.time.push(newtime);
console.log('this.time: ', this.currentJob);
}
this.updateJob();
this.timeRows = this.currentJob.time
},
This will add three time information to the array with all as the employeeID as "01SANJAC"
When I look at each push the employeeID shows each item from the array being pushed.
Why is the final array have all items with the last employeeID value?
final array =
[
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" },
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" },
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" }
]
This is what solved it for me:
updatePersonnelTime() {
console.log("updatePersonnelTime", this.time);
var newtime = this.time;
newtime.controlDateTime = new Date();
if(!this.currentJob.time){
this.currentJob.time = [];
}
for (let i=0; i < this.selected.length; i++){
newtime.employeeID = this.selected[i];
console.log('this.selected[i]: ', this.selected[i]);
// added 'Object.assign in the push
this.currentJob.time.push(Object.assign({}, newtime));
console.log('this.time: ', this.currentJob);
}
this.updateJob();
this.timeRows = this.currentJob.time
},
In the .push i used "Object.assign({}, '')
This works for me.
updatePersonnelTime() {
console.log("updatePersonnelTime", this.time);
var newtime = this.time;
newtime.controlDateTime = new Date();
if(!this.currentJob.time){
this.currentJob.time = [];
}
for (let i=0; i < this.selected.length; i++){
newtime.employeeID = this.selected[i];
console.log('this.selected[i]: ', this.selected[i]);
// added 'Object.assign in the push
this.currentJob.time.push(Object.assign({}, newtime));
console.log('this.time: ', this.currentJob);
}
this.updateJob();
this.timeRows = this.currentJob.time
},

Group array of objects by key and compare grouped result with date array

How to group array of objects to array with key indexname and compare with dates array
var data= [
{
"indexname": "red",
"data": [
{
"date": "2018-09-07",
"count": 3
}
]
},
{
"indexname": "red",
"data": [
{
"date": "2018-09-05",
"count": 2
}
]
},
{
"indexname": "red",
"data": [
{
"date": "2018-09-06",
"count": 10
}
]
},
{
"indexname": "yellow",
"data": [
{
"date": "2018-09-07",
"count": 6
}
]
}
]
var dates=['2018-08-09','2018-08-07','2018-09-07','2018-09-01','2018-09-06','2018-09-05','2018-09-04','2018-09-03','2018-09-02']
var grouped = _.mapValues(_.groupBy(data.results, 'indexname'),
clist => clist.map(index => _.omit(index, 'indexname')));
required format
var result=[['date','red','yellow'],[2018-08-09,0,0],[2018-08-07,0,0],[2018-09-07,3,6],[2018-09-06,10,0],[2018-09-05,5,0],[2018-09-04,0,0],[2018-09-03,0,0],[2018-09-02,0,0],]
I have an array of object and dates array i want to get the following result
How to acheive this?
Here is the pure javascript representation for the output result you want. Might be improved for 1 or 2 less loops:
var data = [{
"indexname": "red",
"data": [{
"date": "2018-09-07",
"count": 3
}]
},
{
"indexname": "red",
"data": [{
"date": "2018-09-05",
"count": 2
}]
},
{
"indexname": "red",
"data": [{
"date": "2018-09-06",
"count": 10
}]
},
{
"indexname": "yellow",
"data": [{
"date": "2018-09-07",
"count": 6
}]
}
];
var dates = ['2018-08-09', '2018-08-07', '2018-09-07', '2018-09-01', '2018-09-06', '2018-09-05', '2018-09-04', '2018-09-03', '2018-09-02'];
//Prepair index1 of final array an push to see how many colors are present
var index1 = ['date'];
var colors_sorted_arr = [];
var dates_sorted_arr = [];
//Push data to index1 for colors
for (var i = 0; i < data.length; i++) {
if (index1.indexOf(data[i].indexname) == -1) {
index1.push(data[i].indexname)
}
}
//Seperate out data according to color wise
for (var i = 0; i < data.length; i++) {
for (var j = 1; j < index1.length; j++) {
if (data[i].indexname == index1[j]) {
if (colors_sorted_arr[(j - 1)] == undefined) {
colors_sorted_arr[(j - 1)] = [];
colors_sorted_arr[(j - 1)].push(data[i].data[0]);
} else {
colors_sorted_arr[(j - 1)].push(data[i].data[0]);
}
}
}
}
//Now push index1 data to final array
dates_sorted_arr[0] = index1;
//For other data to final array loop through dates array , then inside that loop through all colors
//and then for all colors loop inside each value to check for particular data
for (var i = 0; i < dates.length; i++) {
dates_sorted_arr[(i + 1)] = [];
dates_sorted_arr[(i + 1)].push(dates[i]);
for (var j = 0; j < colors_sorted_arr.length; j++) {
for (var k = 0; k < colors_sorted_arr[j].length; k++) {
if (colors_sorted_arr[j][k].date == dates[i]) {
dates_sorted_arr[(i + 1)].push(colors_sorted_arr[j][k].count);
}
}
}
for (var l = 0; l < index1.length; l++) {
if (dates_sorted_arr[(i + 1)].length != index1.length) {
dates_sorted_arr[(i + 1)].push(0);
}
}
}
//After creating above got final result what you want
console.log(dates_sorted_arr);

Why for loop output same record repeatedly? JavaScript

I have some testing data:
var $data = {
"pitanje": [{
"id": 1,
"naziv": 'Kako se zove najveci bruger',
"odgovori": [{
"id": "1",
"ime": "burger1",
"tip": "netacno"
}, {
"id": "2",
"ime": "burger2",
"tip": "netacno"
}, {
"id": "3",
"ime": "burger3",
"tip": "tacno"
}, {
"id": "4",
"ime": "burger4",
"tip": "netacno"
}]
}, {
"id": 2,
"naziv": 'Kako se zove najveci bruger king',
"odgovori": [{
"id": "1",
"ime": "burger12",
"tip": "netacno"
}, {
"id": "2",
"ime": "burger13",
"tip": "netacno"
}, {
"id": "3",
"ime": "burger14",
"tip": "tacno"
}],
}]
};
FOR - LOOP:
for (var i = 0; i < $data.pitanje.length; i++) {
$("#kviz").append("<div class='pitanje col-md-12'><h1>" + $data.pitanje[i]['naziv'] + "</h1></div>");
for (var x = 0; x < $data.pitanje[i]['odgovori'].length; x++) {
$(".pitanje").append("<li class='odgovor col-md-3'><div data-pitanjeid=" +
$data.pitanje[i]['id'] +
" data-odgovorid=" +
$data.pitanje[i]['odgovori'][x]['id'] +
">" +
$data.pitanje[i]['odgovori'][x]['ime'] +
"</div></li>");
// console.log($data.pitanje[i]['odgovori'][x]);
};
};
OUTPUT:
--Kako se zove najveci bruger--
burger1
burger2
burger3
burger4
**burger12**
**burger13**
**burger14**
(why this three from second loop is also in first)
*Kako se zove najveci bruger king*
burger12
burger13
burger14
The problem is that every append one div element with the class pitanje for every iteration of your outer loop:
$("#kviz").append("<div class='pitanje col-md-12'><h1>" + $data.pitanje[i]['naziv'] + "</h1></div>");
In the inner loop you query for $(".pitanje"). In the the second iteration of the first loop this will find both divs you have created, and will add the append the data to both of them.
You would need to write something like that:
for (var i = 0; i < $data.pitanje.length; i++) {
var elementToAppendTo = $("<div class='pitanje col-md-12'><h1></h1><ul></ul></div>");
elementToAppendTo.find('h1').text($data.pitanje[i]['naziv']);
$("#kviz").append(elementToAppendTo);
for (var x = 0; x < $data.pitanje[i]['odgovori'].length; x++) {
var newItem = $("<li class='odgovor col-md-3'><div></div></li>")
newItem.find('div').data({
pitanjeid: $data.pitanje[i]['id'],
odgovorid: $data.pitanje[i]['odgovori'][x]['id']
}).text($data.pitanje[i]['odgovori'][x]['ime'])
elementToAppendTo.find('ul').append(newItem);
// console.log($data.pitanje[i]['odgovori'][x]);
}
}
An additional note: a li element is not a valid child of an ul.

aggregate in nested ng-repeat

I want to create a sum of taskAssembly.labour of each taskAssembly object and put it in the totalLabour field
see this plunker. http://plnkr.co/edit/rKnup0IIPRYvh8JLHXbD?p=preview
see my data:
{ "client": "client1","takeoff": [{
"taskName": "ToW",
"taskQnt": 2300,
"totalLabour":"",
"taskAssembly": [
{
"taskName": "ToW",
"taskQnt": 2300,
"taskLabour": 22,
"taskAssembly": [
{ "qnt": 2300, "product": "non-INT", "labour": 12, "application": "spray" },
{ "qnt": 2300, "product": "non-INT", "labour": 10, "application": "strips" }
]
},
{
"taskName": "Pens",
"taskQnt": 43,
"taskLabour": 23,
"taskAssembly": [
{ "qnt": 43, "product": "non-INT", "labour": 23, "application": "spray" }
]
}
]}
my code is not exactly doing what I need.
$scope.getTotalLabour = function(){
var total = 0;
for(var i = 0; i < $scope.estimate.takeoff.length; i++){
var item = $scope.estimate.takeoff[i];
total += (item.taskLabour);
}
return $scope.estimate.totalLabour = total;
}
any idea of how I can do this?
Check working demo: JSFiddle
Simply create a nested loop like:
for(var i = 0; i < $scope.estimate.takeoff.length; i++){
var total = 0;
var item = $scope.estimate.takeoff[i];
console.log(item);
for (var j = 0; j < item.taskAssembly.length; j++) {
total += (item.taskAssembly[j].labour);
}
item.totalLabour = total;
}

Compare two objects in jQuery and get the difference [duplicate]

This question already has answers here:
How to get the difference between two arrays in JavaScript?
(84 answers)
Closed 7 years ago.
Using jQuery I would like to compare 2 objects:
sourceArray:
var origArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
destination array
var destArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 888
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
What I would like to do, is compare the target object with the source object based on the ID and find the mis-matched entries with a description on the resultant object. So the result will look like this:
var resultArray = [{
"Name": "Double",
"URL": "yyy",
"ID": 888,
"desc": "missing in source"
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345,
"desc": "missing in destination"
}];
Any quick help is really appreciated.
This isn't a good use of jQuery, but here is some vanilla javascript that does what you want.
function objDiff(array1, array2) {
var resultArray = []
array2.forEach(function(destObj) {
var check = array1.some(function(origObj) {
if(origObj.ID == destObj.ID) return true
})
if(!check) {
destObj.desc = 'missing in source'
resultArray.push(destObj)
}
})
array1.forEach(function(origObj) {
var check = array2.some(function(destObj) {
if(origObj.ID == destObj.ID) return true
})
if(!check) {
origObj.desc = 'missing in destination'
resultArray.push(origObj)
}
})
return resultArray
}
https://jsfiddle.net/9gaxsLbz/1/
If you are wanting to dedupe your array, this will work:
var merged = origArray.concat(destArray);
var unique = merged.filter(function(item) {
return ~this.indexOf(item.ID) ? false : this.push(item.ID);
}, []);
Fiddle: https://jsfiddle.net/Ljzor9c6/
If you are only wanting items that were duped, you can easily invert the condition:
var merged = origArray.concat(destArray);
var dupes = merged.filter(function(item) {
return ~this.indexOf(item.ID) ? true : !this.push(item.ID);
}, []);
You can loop through the items in the first array and put the ID's in a map, then loop through the items in the second array and remove the matching ID's and add the missing.
Then just loop through the map to create the objects in the resulting array:
var origArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
var destArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 888
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
var map = {};
for (var i = 0; i < origArray.length; i++) {
map[origArray[i].ID] = 'source';
}
for (var i = 0; i < destArray.length; i++) {
var id = destArray[i].ID;
if (id in map) {
delete map[id];
} else {
map[id] = 'destination';
}
}
var resultArray = [];
for (key in map) {
var arr = map[key] == 'source' ? origArray : destArray;
for (var i = 0; arr[i].ID != key; i++) ;
resultArray.push({
Name: arr[i].Name,
URL: arr[i].URL,
ID: arr[i].ID,
desc: 'missing in ' + map[key]
});
}
// show result in StackOverflow snippet
document.write(JSON.stringify(resultArray));
var result = [];
for(var i = 0; i < oa.length; i++) {
var idx = mIndexOf(oa[i].ID);
if(idx > -1) {
oa.splice(i, 1);
da.splice(idx, 1);
}
}
for(var i = 0; i < oa.length; i++) {
var ln = result.length;
result[ln] = oa[i];
result[ln].desc = "missing in destination";
}
for(var i = 0; i < da.length; i++) {
var ln = result.length;
result[ln] = da[i];
result[ln].desc = "missing in origin";
}
function mIndexOf(id) {
for(var i = 0; i < oa.length; i++)
if(oa[i].ID == id)
return i;
return -1;
}
console.log(result);
0: Object
ID: 345
Name: "Double"
URL: "yyy"
desc: "missing in destination"
1: Object
ID: 888
Name: "Double"
URL: "yyy"
desc: "missing in origin"
jsfiddle DEMO
For things like this, you should use lodash. With lodash you can just do this:
var resultArray = _.defaults(destArray, origArray);

Categories

Resources