skip to Main Content

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


  1. You can convert a javascript object to json with JSON.stringify()

    Login or Signup to reply.
  2. Modify this section

    graphWorkerType[key] = new Array();
    $.each(value, function(key2, value2 ) {
            graphWorkerType[key].push(key2);
    });
    

    with

    graphWorkerType[key] = { labels: [], values: []};
    $.each(value, function(key2, value2 ) {
        graphWorkerType[key]['labels'].push(key2);
        graphWorkerType[key]['values'].push(value2);
    });
    

    Then you can pass your graphWorkerType object to the chart

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search