Creating a JSON object from Javascript array

Question

So for each checkbox selected, I am getting the associated id and depending on values there deducing the node values, which is working fine. The problem I am facing is creating a proper javascript object with values from all checkboxes.

Here's the function,

function finlizeJParams()
                    {
                        var jsonOutput=[];
                        var array =  $("input[type='checkbox']:checked").map(function(){ 

                            var str=this.id;

                            var data=[];
                            var objID=str.substring(str.lastIndexOf("c_")+2,str.lastIndexOf("_n_"));
                            var objName=str.substring(str.lastIndexOf("_n_")+3,str.lastIndexOf("_p_"));
                            var objParentID=str.substring(str.lastIndexOf("_p_")+3,str.lastIndexOf("_pn_"));
                            var objParentName=str.substring(str.lastIndexOf("_pn_")+4);

                            data['ItemID']=objID;
                            data['ItemName']=objName;
                            data['ItemParentID']=objParentID;
                            data['ItemParentName']=objParentName;
                            jsonOutput.push(data)

                            return jsonOutput;
                        }).get()

                        JSON.stringify(array);
                    }

This seems to be working as I am getting arrays when I try to print it on console, See below

0: Array[0]
    ItemParentName: "Fruit"
    ItemParentID: "7"
    ItemID: "8"
    ItemName: "Apple"
1: Array[0]
    ItemParentName: "Fruit"
    ItemParentID: "7"
    ItemID: "9"
    ItemName: "Orange"

However, if I do a JSON.stringify(jsonOutput), I get empty arrays [[],[]]? What am I doing wrong? Also, how can I group these array by parentID/Name and then convert to a JSON object?

I can't immediately see the bug, but you seem to be confusing several approaches to the problem: you're using .map() (transform one array to another), but not actually returning anything from the callback, so it's the same as if you did .each (loop over an array with no explicit result); and I've no idea what that .get() is doing on the end there. — IMSoP
– IMSoP, Commented Jun 7, 2014 at 14:08
Yeah, somehow messed it up trying to solve the issue. Code updated now. — redGREENblue
– redGREENblue, Commented Jun 7, 2014 at 16:31
You're still mixing up mapping a function over the array with looping over it with an external accumulator: jsonOutput is global to all iterations of the array, and you're adding to it on each loop; so you'll add 1 item the 1st time around, 2 on the 2nd, 3 on the 3rd, etc. Either use .each and keep jsonOutput as your accumulator (drop the var array =) or use .map and just return data each time (drop all references to jsonOutput). — IMSoP
– IMSoP, Commented Jun 7, 2014 at 17:30
Actually, it's worse than I thought: by returning the same object each time, you end up adding multiple references to the same object, which jQuery only flattens at the end, so the resulting array for 3 items contains the processed version of those 3 items, repeated 3 times. — IMSoP
– IMSoP, Commented Jun 7, 2014 at 17:41
When trying to "group" data in JS, there is another important difference between an array and an object: an array has defined order, but automatically set keys; an object has keys which you decide, but no defined order. If the order of categories doesn't matter, then a structure like cats = { 'cat1': [item1, item2], 'cat2': [item3, item4] } will work; if you need the categories to be in order, it needs to be more like cats = [ { 'name': 'cat1', 'items': [item1, item2], 'name': 'cat2', 'items': [item3, item4] } ]. Try adding to some structures by hand before putting the code into the loop. — IMSoP
– IMSoP, Commented Jun 7, 2014 at 18:07

Quentin · Accepted Answer · 2014-06-07 14:06:58Z

5

You are treating an array as a plain object.

While arrays inherit from objects, they are designed for numerical indexed, sequential data and only properties with numerical values will be included when you pass them through JSON.stringify.

If you want to use named keys, then use an object ({}), not an array ([]).

var data={};

answered Jun 7, 2014 at 14:06

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a JSON object from Javascript array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related