I am working on building a web application for a client and I am so close to being done, but have a few hang ups that I need a little bit of help with.
I need help of turning a JavaScript Object’s KEYs and VALUEs into a JSON string so that I can use it in a Chart. Chart I am using is ChartJS.
This is what my array looks like.
Object {full-time: Object, part-time: Object}
full-time: Object
Access: 1
Excel: 2
Facebook: 1
NoSQL: 1
PHP: 1
WebEX: 1
WordPress: 1
part-time: Object
.NET: 1
Adobe Photoshop: 1
Visual Basic: 1
WordPress: 1
XML: 1
My ultimate goal is to have a couple variables like this so when I run through a $.each on the main object I would have it in the code like this:
skillGraph[key]['labels'] = SOMETHING HERE (.push ??)
Then when we console log each of the variable they would look like this:
skillGraph['part-time']['labels'] = [".NET","Adobe PhotoShop", "Visual Basic","WordPress", "XML"]
skillGraph['part-time']['values'] = [1,1,1,1,1]
That way I can the call the ChartJS Graph like this:
var workerTypePT = {
labels : skillGraph['part-time']['labels'],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
highlightFill : "rgba(151,187,205,0.75)",
data: skillGraph['part-time']['values']
}
]
}
What have I tried?
I have tried doing a $.each on the main object and then doing an $.each on the key of that here is my current code. Inside the {{ }} is what you would see in the console for the first iteration.
graphWorkerType = {};
$.each(skillCountPerType, function(key, value) {
console.log(key); {
{
full - time
}
}
console.log(value); {
{
Object {
PHP: 1,
NoSQL: 1,
WebEX: 1,
Facebook: 1,
WordPress: 1…
}
Access: 1
Excel: 2
Facebook: 1
NoSQL: 1
PHP: 1
WebEX: 1
WordPress: 1
}
}
$('#typeUser').append('<option value="' + key + '">' + key + '</option>');
skillsforGraph = JSON.stringify(skillCountPerType[value]);
console.log(skillsforGraph); {
{
{
"PHP": 1,
"NoSQL": 1,
"WebEX": 1,
"Facebook": 1,
"WordPress": 1,
"Excel": 2,
"Access": 1
}
}
}
graphWorkerType[key] = new Array();
$.each(value, function(key2, value2) {
graphWorkerType[key].push(key2);
});
console.log(graphWorkerType); {
{
Object {
full - time: Array[7], part - time: Array[5]
}
full - time: Array[7]
0: "PHP"
1: "NoSQL"
2: "WebEX"
3: "Facebook"
4: "WordPress"
5: "Excel"
6: "Access"
part - time: Array[5]
0: "WordPress"
1: "XML"
2: ".NET"
3: "Adobe Photoshop"
4: "Visual Basic"
}
}
});
2
Answers
You can convert a javascript object to json with JSON.stringify()
Modify this section
with
Then you can pass your graphWorkerType object to the chart