JS HighCharts.js Pie data undefined error in code - javascript

I am having a bit of an issue with the following code:
//The Code:
var data = [];
for (var i = 0; i < mydata.length; i++) { //looping through data received
var obj = mydata[i]; //current obj in loop
var newObj = { //creating new obj with same structure as the 'data' that works
name: obj.name,
y: obj.subhere.subhere1,
id: i
};
data.push(newObj); //pushing each object into the data array
}
//THE DATA:
var data = [{ name: 'Name 1', y: 20, id: 0 },{ name: 'Name 2', y: 10, id: 1 },{ name: 'Name 3', y: 10, id: 2 }];
//THE CHART CODE:
chart = new Highcharts.Chart({
series:[
{
"data": data,
type: 'pie',
animation: false,
point:{
events:{
click: function (event) {
//alert(this.id);
}
}
}
}
],
"chart":{
"renderTo":"container"
},
});
//The above with create a pie chart with 3 names
//The Data
var mydata =[{
"001":{
"name":"Name 1",
"subhere":{
"subhere1":2
}
},
"002":{
"name":"Name 2",
"subhere":{
"subhere1":20
}
},
}];
The console is giving me the following error:
TypeError: obj.subhere is undefined y: obj.subhere.subhere1,
I can see that the subhere.subhere1 names actually exists so in theory it should not be giving me an error, right?.
How can I fix this issue ... any ideas?

myData doesn't look correctly formatted. It has an extra comma after the bracket before last:
},
}];
You can loop through your object properties:
var data = [];
for (var i = 0; i < mydata.length; i++) { //looping through data received
var obj = mydata[i]; //current obj in loop
for(var key in obj){
var newObj = { //creating new obj with same structure as the 'data' that works
name: obj[key].name,
y: obj[key].subhere.subhere1,
id: i
};
data.push(newObj); //pushing each object
}
}

To work with your existing code, you could change the definition of mydata to this:
var mydata =[
{
"name":"Name 1",
"subhere":{
"subhere1":2
}
},
{
"name":"Name 2",
"subhere":{
"subhere1":20
}
}
];

Related

Finding objects in a nested array along with their position

I've taken the following sample from a different question. And I am able to identify the object. But I also need to find our the position of that object. For example:
var arr = [{
Id: 1,
Categories: [{
Id: 1
},
{
Id: 2
},
]
},
{
Id: 2,
Categories: [{
Id: 100
},
{
Id: 200
},
]
}
]
If I want to find the object by the Id of the Categories, I can use the following:
var matches = [];
var needle = 100; // what to look for
arr.forEach(function(e) {
matches = matches.concat(e.Categories.filter(function(c) {
return (c.Id === needle);
}));
});
However, I also need to know the position of the object in the array. For example, if we are looking for object with Id = 100, then the above code will find the object, but how do I find that it's the second object in the main array, and the first object in the Categories array?
Thanks!
Well, if every object is unique (only in one of the categories), you can simply iterate over everything.
var arr = [{
Id: 1,
Categories: [{Id: 1},{Id: 2}]
},
{
Id: 2,
Categories: [{Id: 100},{Id: 200}]
}
];
var needle = 100;
var i = 0;
var j = 0;
arr.forEach(function(c) {
c.Categories.forEach(function(e) {
if(e.Id === needle) {
console.log("Entry is in position " + i + " of the categories and in position " + j + " in its category.");
}
j++;
});
j = 0;
i++;
});
function findInArray(needle /*object*/, haystack /*array of object*/){
let out = [];
for(let i = 0; i < haystack.lenght; i++) {
if(haystack[i].property == needle.property) {
out = {pos: i, obj: haystack[i]};
}
}
return out;
}
if you need the position and have to filter over an property of the object you can use a simple for loop. in this sample your result is an array of new object because there can be more mathches than 1 on the value of the property.
i hope it helps
Iterate over the array and set index in object where match found
var categoryGroups = [{
Id : 1,
Categories : [{
Id : 1
}, {
Id : 2
},
]
}, {
Id : 2,
Categories : [{
Id : 100
}, {
Id : 200
},
]
}
]
var filterVal = [];
var needle = 100;
for (var i = 0; i < categoryGroups.length; i++) {
var subCategory = categoryGroups[i]['Categories'];
for (var j = 0; j < subCategory.length; j++) {
if (subCategory[j]['Id'] == findId) {
filterVal.push({
catIndex : i,
subCatIndex : j,
id : needle
});
}
}
}
console.log(filterVal);
Here is solution using reduce:
var arr = [{ Id: 1, Categories: [{ Id: 1 }, { Id: 2 }, ] }, { Id: 2, Categories: [{ Id: 100 }, { Id: 200 }, ] } ]
const findPositions = (id) => arr.reduce((r,c,i) => {
let indx = c.Categories.findIndex(({Id}) => Id == id)
return indx >=0 ? {mainIndex: i, categoryIndex: indx} : r
}, {})
console.log(findPositions(100)) // {mainIndex: 1, categoryIndex: 0}
console.log(findPositions(1)) // {mainIndex: 0, categoryIndex: 0}
console.log(findPositions(200)) // {mainIndex: 1, categoryIndex: 1}
console.log(findPositions(0)) // {}
Beside the given answers with fixt depth searh, you could take an recursive approach by checking the Categories property for nested structures.
function getPath(array, target) {
var path;
array.some(({ Id, Categories = [] }) => {
var temp;
if (Id === target) {
path = [Id];
return true;
}
temp = getPath(Categories, target);
if (temp) {
path = [Id, ...temp];
return true;
}
});
return path;
}
var array = [{ Id: 1, Categories: [{ Id: 1 }, { Id: 2 },] }, { Id: 2, Categories: [{ Id: 100 }, { Id: 200 }] }];
console.log(getPath(array, 100));
.as-console-wrapper { max-height: 100% !important; top: 0; }

JavaScript / jQuery: Compare 2 jSON objects and output result into new object

I have an api call that replies with an updated jSON object, I also have 1 static jSON object file. I am trying to compare a value in the object per teams with the same name.
So if Team John had 22 in the old file, and has 28 now, the new object should output Team John as 6. Subtracting the 2 and displaying the difference.
I have made a jsFiddle to help understand and update.
LATEST UPDATE: The answer has been solved by mscdeveloper! Check for his post and answer below.
UPDATE (not the answer): I have found a solution while searching in stackoverflow, this does EXACTLY what I want, but I lost the team's name in the process, how can I fix the code to where it doesn't delete it, I know it has something to do with the groupByTypeID function I have?
Updated jsFiddle: https://jsfiddle.net/kqmfsz9n/5/
var obj1 = {
"teams": [
{
name: 'Test 1',
numMembers: '50'
},
{
name: 'Test 2',
numMembers: '12'
}
]
};
var obj2 = {
"teams": [
{
name: 'Test 1',
numMembers: '75'
},
{
name: 'Test 2',
numMembers: '18'
}
]
};
var newObj = {};
function groupByTypeID(arr) {
var groupBy = {};
jQuery.each(arr, function () {
groupBy[this.name] = parseInt(this.numMembers);
});
return groupBy;
}
var userArrayGroups = groupByTypeID(obj2.teams);
var origArrayGroups = groupByTypeID(obj1.teams);
var newObj = [];
for (var prop in userArrayGroups) {
newObj[prop] = userArrayGroups[prop] - origArrayGroups[prop];
newObj.push(userArrayGroups[prop] - origArrayGroups[prop]);
if (newObj[prop] == 0) {
delete newObj[prop];
}
}
console.log(newObj);
All help is appreciated!
Thank you.
var obj1 = {
"teams": [
{
name: 'Test 1',
numMembers: '50'
},
{
name: 'Test 2',
numMembers: '12'
}
]
};
var obj2 = {
"teams": [
{
name: 'Test 1',
numMembers: '75'
},
{
name: 'Test 2',
numMembers: '18'
}
]
};
var newObj = {};
var items_arr=[]; //array of obj2 not exist in obj1
if(obj1.teams){ //if exist array of teams obj1
var o1teams = obj1.teams;
if(obj2.teams){ //if exist array of teams obj2
var o2teams = obj2.teams;
for(var key2 in o2teams){
var o2teams = obj2.teams;
for(var key1 in o1teams){
if(o2teams[key2].name==o1teams[key1].name){
var numMembers_o1_int=parseInt(o1teams[key1].numMembers)||0;
var numMembers_o2_int=parseInt(o2teams[key2].numMembers)||0;
var result_numMembers_int=numMembers_o2_int-numMembers_o1_int;
var result_numMembers=result_numMembers_int+''; //convert to string
var items_for_add=o1teams[key1];
items_for_add.numMembers=result_numMembers;
items_arr.push(items_for_add);
}
}
}
}
}
newObj.items=items_arr;
console.log(newObj);
https://jsfiddle.net/mscdeveloper/uxv1t2a7/3/

Mapping 2 related arrays together

I'm looking for the cleanest and coolest way to merge related arrays together in JavaScript.
My example is this:
I get two JSON arrays from my API: Issues and Locations.
Issues have a location_id and as a result I want to give each Issue a location field which has the correct location object depending on the Issue's location_id.
If I had this data:
var issues = [{id: 1, title: 'issue 1', location_id: 1}, {id: 12, title: 'issue 1', location_id: 2}];
var locations = [{id: 1, name: 'location 1'}, {id: 2, name: 'location 2'}];
The ugly solution would be:
for(i = 0; i < issues.length; ++i) {
for(j = 0; j < locations.length; ++j) {
if(issues[i].location_id == locations[j].id) {
issues[i].location = locations[j];
break;
}
}
}
The resulting issues array would be:
[[object Object] {
id: 1,
location: [object Object] {
id: 1,
name: "location 1"
},
location_id: 1,
title: "issue 1"
}, [object Object] {
id: 12,
location: [object Object] {
id: 2,
name: "location 2"
},
location_id: 2,
title: "issue 1"
}]
I was trying (and failing) to come up with a shorter solution or even a one liner using .map().
Any guidance appreciated!! :)
Use map and filter:
issues.map(function (issue) {
issue.location = locations.filter(function(location) {
return issue.location_id === location.id;
})[0];
return issue;
});
Use an object to keep the map, then time complexity will be O(n+m) instead of O(n*m).
var issues = [{id: 1, title: 'issue 1', location_id: 1}, {id: 12, title: 'issue 1', location_id: 2}];
var locations = [{id: 1, name: 'location 1'}, {id: 2, name: 'location 2'}];
var binds = function(locationList, issueList) {
var locMap = {};
// clone. If you want to directly modify the issues, this line is no need.
issueList = JSON.parse(JSON.stringify(issueList));
// construct map from location list.
locationList.forEach(function(location) {
locMap[location.id] = location;
});
// Use the map to bind location and issue.
issueList.forEach(function(issue) {
var loc = locMap[issue.location_id];
if (loc) {
issue.location = loc;
}
});
// If you don't want to clone, this line is no need.
return issueList;
};
var bindResult = binds(locations, issues);
console.log(bindResult);
You can use forEach and filter
var result = issues.forEach(function (issue) {
issue.location = locations.filter(function (location) {
return location.id == issue.location_id;
})[0]
})
which gives you this output when you console.log(result)
[{
"id": 1,
"title": "issue 1",
"location_id": 1,
"location": {
"id": 1,
"name": "location 1"
}
}, {
"id": 12,
"title": "issue 1",
"location_id": 2,
"location": {
"id": 2,
"name": "location 2"
}
}]
1. you can optimize your code to :
var locationObj = {};
for(i = 0; i < location.length; i++) {
locationObj[location[i].id] = location[i];
}
for(i = 0; i < issues.length; i++) {
if(issues[i].location_id){
issues[i].location = locationObj[location_id]
}
}
It will cache all location in one object and will directly use that location detail it as that object's property.It will be faster in execution rather than using filter or map on location array each time.
2. if your location's id and location array's index are in sync then following would be a better and faster solution.
for(i = 0; i < issues.length; i++) {
if(issues[i].location_id){
issues[i].location = locations[location_id-1]
}
}

Javascript JSON not working after parsing

I need to get graph generated from Mysql database with help of PHP. I got nice application from (http://canvasjs.com). So, I created my own JSON format in variable element from PHP SESSION. It gies me no error when debugged, but no result.
Line number 34 - 37 gives me graph if I don't comment them. When comment them and replace with my own JSON which is variable element and does not give me graph. Gives me blank page.
I am new to JSON. Help me out with this.
Following are my codes.
var array = <?php echo json_encode($_SESSION["r_array"]); ?>;
var count = 0;
var element = '';
var title = 'Malware lab, TCRC, CTA';
for( var i in array) {
if ( count == 0 ) {
element += ‘{y: ‘+array[i]+’,’+’ indexLabel: “‘+i+'”}';
} else {
element += ‘, {y: ‘+array[i]+’,’+’ indexLabel: “‘+i+'”}';
}
count++;
}
var chart = new CanvasJS.Chart(“chartContainer”,
{
title: {
text: title
},
data: [
{ type: type,
dataPoints: [
/*
34 {y: 2, indexLabel: “Kaka'”},
35 {y: 3, indexLabel: “Blackberry”},
36 {y: 1, indexLabel: “Windows Phone”},
37 {y: 5, indexLabel: “Others”},*/
element,
]
}
]
});
chart.render();
Dumped array of $_SESSION["r_array"] as following
Array (
[Trojan] => 1
[Malware] => 3
[Backdoor] => 6
[Virus] => 2
[Bot] => 5
[Rootkit] => 7
[Worm] => 5
)
element must be an array, you are trying to create it as a string(with syntax errors)
var array = <? php echo json_encode($_SESSION["r_array"]); ?> ;
var count = 0;
var element = [];
var title = 'Malware lab, TCRC, CTA';
for (var i in array) {
element.push({
y: array[i],
indexLabel: i
})
count++;
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: title
},
data: [{
type: type,
dataPoints: element
}]
});
chart.render();
Demo: Fiddle
Yo need to pass array in correct Way
Use another variable datapoints = [];
and the push object into that array
var datapoints = [];
for( var i in array) {
datapoints.push({ y : array[i] , indexLabel : i});
}
and then use it as below
var chart = new CanvasJS.Chart(“chartContainer”,
{
title: {
text: title
},
data: [
{ type: type,
dataPoints: datapoints
}
]
});
chart.render();

Javascript and Arrays

This i have to admin has always been my Achilles tendon despite my years of experience in programming.
I have a json result looking like this from which I want to draw a time series using highcharts.com
[{"iso-2":"DE","year":"2000","value":"0"},{"iso-2":"FR","year":"2000","value":"0"},{"iso-2":"KE","year":"2000","value":"0"},{"iso-2":"DE","year":"2001","value":"0"},{"iso-2":"FR","year":"2001","value":"0"},{"iso-2":"KE","year":"2001","value":"0"},{"iso-2":"DE","year":"2002","value":"0"},{"iso-2":"FR","year":"2002","value":"0"},{"iso-2":"KE","year":"2002","value":"0"},{"iso-2":"DE","year":"2003","value":"9355"},{"iso-2":"FR","year":"2003","value":"19490"},{"iso-2":"KE","year":"2003","value":"0"},{"iso-2":"DE","year":"2004","value":"0"},{"iso-2":"FR","year":"2004","value":"0"},{"iso-2":"KE","year":"2004","value":"0"},{"iso-2":"DE","year":"2005","value":"11"},{"iso-2":"FR","year":"2005","value":"8"},{"iso-2":"KE","year":"2005","value":"0"},{"iso-2":"DE","year":"2006","value":"2"},{"iso-2":"FR","year":"2006","value":"1388"},{"iso-2":"KE","year":"2006","value":"0"},{"iso-2":"DE","year":"2007","value":"0"},{"iso-2":"FR","year":"2007","value":"0"},{"iso-2":"KE","year":"2007","value":"0"}]
I'd like to dynamically generate the above result into an arrays that looks like this
series: [{
name: 'KE',
data: [0,0,0,0,0,0,0,0]
}, {
name: 'FR',
data: [0,0,0,19490,0,8,1388,0]
}, {
name: 'DE',
data: [0,0,0,9355,0,2,0]
}]
Thank you so much for looking into this
var gathered = data.reduce(function(prev, curr) {
if (prev.hasOwnProperty(curr["iso-2"])) {
prev[curr["iso-2"]].push(parseInt(curr["value"]));
} else {
prev[curr["iso-2"]] = [parseInt(curr["value"])];
}
return prev;
}, {});
var result = [];
for (var country in gathered) {
var obj = {};
obj["name"] = country;
obj["data"] = gathered[country];
result.push(obj);
}
console.log(result);
Output
[ { name: 'DE', data: [ 0, 0, 0, 9355, 0, 11, 2, 0 ] },
{ name: 'FR', data: [ 0, 0, 0, 19490, 0, 8, 1388, 0 ] },
{ name: 'KE', data: [ 0, 0, 0, 0, 0, 0, 0, 0 ] } ]
Here's what I can think of, considering the data you have in the JSON is sorted by year:
var json_data = '[{"iso-2":"DE","year":"2000","value":"0"},...]'; // This is the json data you have.
var data = JSON.parse(json_data); // Convert JSON data to javascript object or array
// Organize the data in an object
var organized = {};
data.forEach(function (item){
if (typeof organized[item['iso-2']] !== 'undefined'){
organized[item['iso-2']].push(item['value']);
} else {
organized[item['iso-2']] = [item['value']];
}
});
// Convert the object to the format you need
var series = [];
for (i in organized){
series.push({
name: i,
data: organized[i]
});
}

Categories

Resources