Javascript Multi Sub Array

Question

i have a javascript code which generates dynamic sub arrays.

function createArray() {

    var myArr = new Object();
    myArr[0] = createSubArray('apple');
    myArr[1] = createSubArray('Mango');
    myArr[2] = createSubArray('Pineapple');
    myArr[3] = createSubArray('Grape');
    document.getElementById("a").innerHTML = JSON.stringify(myArr);
    return myArr;

}


function createSubArray(name){
    var arr = new Object();
    elems = document.getElementsByName(name);
    for (var i=0;i<elems.length;i++){
        if (elems[i].checked){
            arr[name] =  elems[i].value;
            arr['price'] =  elems[i].getAttribute('data-price');
        }
    }
    return arr;

}

And i got the output as below

array
  0 => 
    array
      'apple' => string 'light' (length=5)
      'price' => string '10' (length=2)
  1 => 
    array
      'apple' => string 'light1' (length=5)
      'price' => string '10' (length=2)
  2 => 
    array
      'Mango' => string 'dark' (length=4)
      'price' => string '40' (length=2)
  3 => 
    array
      'Pineapple' => string 'dark' (length=4)
      'price' => string '60' (length=2)
  4 => 
    array
      'Grape' => string 'dark' (length=4)
      'price' => string '80' (length=2)

But i need to array to be like below

array
  0 => 
    array
      'apple' => string 'light' (length=5)
       0 => 
           array
            'apple' => string 'light' (length=5)
            'price' => string '10' (length=2)
       1 => 
           array
            'apple' => string 'light1' (length=5)
            'price' => string '10' (length=2)
  1 => 
    array
      'Mango' => string 'light' (length=5)
       0 => 
           array
            'Mango' => string 'light' (length=5)
            'price' => string '10' (length=2)
  2 => 
    array
      'Pineapple' => string 'light' (length=5)
       0 => 
           array
            'Pineapple' => string 'light' (length=5)
            'price' => string '10' (length=2)

so i have changed the javascript like this

function createArray()
{
    var myArr = new Object();
    var _tempa = new Array();
    var elems = document.getElementsByTagName("input");
     for (var i=0;i<elems.length;i++)
     {  if (elems[i].checked){
         _tempa.push(elems[i].getAttribute('name'));
            myArr[i] = createSubArray1(_tempa);
          }
      }
     document.getElementById("a").innerHTML = JSON.stringify(myArr);
    return myArr;
} 

function createSubArray1(namearr){

    var arr1 = new Object();
    for (var j=0;i<namearr.length;j++){
    var elems = document.getElementsByName(name[j]);
    for (var i=0;i<elems.length;i++){
        if (elems[i].checked)
        {
        arr1[elems[i].getAttribute('data-gpname')] =  createSubArray(elems[i].getAttribute('name'));
        }
    }
    }
    return arr1;
}

 function createSubArray(name){
    var arr = new Object();
    var elems = document.getElementsByName(name);
    for (var i=0;i<elems.length;i++){
        if (elems[i].checked)
        {
        arr['productname'] =  elems[i].value;
        arr['price'] =  elems[i].getAttribute('data-price');
        }
    }
    return arr;
}

After this i am getting the out put like below

[{},{}]

My Html Is Below

<form method="post">
Apple
<input type="radio" onclick="createArray()" id="one" name="apple" data-gpname="apple" data-price="10" value="light"/> Light
<input type="radio" onclick="createArray()" id="two" name="apple" data-gpname="apple" data-price="20" value="dark" /> Dark
<input type="radio" onclick="createArray()" id="one1" name="apple1" data-gpname="apple"  data-price="120" value="light2"/> Light11
<input type="radio" onclick="createArray()" id="two1" name="apple1" data-gpname="apple" data-price="210" value="dark1" /> Dark22
<input type="text" id="appleqty" name="appleqty" value="" />
<br>
Mango
<input type="radio" onclick="createArray()" id="three" name="Mango" data-gpname="Mango"  data-price="30" value="light"/> Light
<input type="radio" onclick="createArray()" id="one" name="Mango" data-gpname="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
<br>
Pine Apple
<input type="radio" onclick="createArray()" id="four" name="Pineapple" data-gpname="Pineapple" data-price="50" value="light"/> Light
<input type="radio" onclick="createArray()" id="five" name="Pineapple" data-gpname="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
<br>
Grape
<input type="radio" onclick="createArray()" id="six" name="Grape" data-gpname="Grape" data-price="70" value="light"/> Light
<input type="radio" onclick="createArray()" id="seven" name="Grape" data-gpname="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

<textarea name="a" id="a" cols="50"></textarea>
<input type="submit" name="se" value="se" />
</form>

I have used php json_decode to get the array Structure

Please don't write a novel but short, meaningful question… — feeela
– feeela, Commented Sep 18, 2012 at 10:18
I agree with @feeela the problem could be expressed more succinctly, perhaps by reducing the size of the test data for a start. — Adam
– Adam, Commented Sep 21, 2012 at 6:59
A well explained question is always better than a vague-short one. Also this a specific case, which means a short question is not really possible. — techfoobar
– techfoobar, Commented Sep 21, 2012 at 7:04

techfoobar · Accepted Answer · 2012-09-21 09:09:06Z

3

Updated Demo with output in Textarea: http://jsfiddle.net/zZxaR/13/

Note: Added a couple of methods to pretty print the array in the console

Disclaimer: Used a bit of jQuery to make the traversal easier. Can be done just as easily without using it too.

Code:

function createArray() {
    var myArray = [], i = 0, temp;
    while(i < 4) myArray[i++] = [];
    myArray[0]['apple'] = '';
    myArray[1]['mango'] = '';
    myArray[2]['grape'] = '';
    myArray[3]['pineapple'] = '';

    $('input[data-gpname]:checked').each(function() {
        var gp = $(this).attr('data-gpname').toLowerCase();
        for(i = 0; i < 4; i++) {
            if(myArray[i][gp] != undefined) {
                myArray[i][gp] = $(this).attr('value');
                temp = [];
                temp[gp] = $(this).attr('value');
                temp['price'] = $('#' + gp + 'qty').val();
                myArray[i].push(temp);
            }
        }
    });

    console.log(myArray);
    prettyPrint(myArray);
}

edited Sep 21, 2012 at 9:09

answered Sep 21, 2012 at 8:48

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

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

3 Comments

Varun Sridharan Over a year ago

i need the json output like this chat.stackoverflow.com/transcript/message/5451353#5451353

Shea Over a year ago

why does this answer contain canc... I mean jQuery?

techfoobar Over a year ago

just to make the traversal a little easy. it can easily be done without too. there is a disclaimer for jquery usage right at the beginning of the answer. :-)

Community · Accepted Answer · 2021-01-18 12:34:40Z

2

+50

Hope this will help you. The output is same like you told here.

The source of this page is here.

I made a another sample based on your comments. Try this and let me know.

HTML:

<form method="post" id="myform">
Apple
<input type="radio" onclick="constructJSON(this.name)" id="one" name="apple" data-gpname="apple" data-price="10" value="light"/> Light
<input type="radio" onclick="constructJSON(this.name)" id="two" name="apple" data-gpname="apple" data-price="20" value="dark" /> Dark
<input type="radio" onclick="constructJSON(this.name)" id="one1" name="apple1" data-gpname="apple"  data-price="120" value="light2"/> Light11
<input type="radio" onclick="constructJSON(this.name)" id="two1" name="apple1" data-gpname="apple" data-price="210" value="dark1" /> Dark22
<input type="text" id="appleqty" name="appleqty" value="" />
<br>
Mango
<input type="radio" onclick="constructJSON(this.name)" id="three" name="Mango" data-gpname="Mango"  data-price="30" value="light"/> Light
<input type="radio" onclick="constructJSON(this.name)" id="one" name="Mango" data-gpname="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
<br>
Pine Apple
<input type="radio" onclick="constructJSON(this.name)" id="four" name="Pineapple" data-gpname="Pineapple" data-price="50" value="light"/> Light
<input type="radio" onclick="constructJSON(this.name)" id="five" name="Pineapple" data-gpname="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
<br>
Grape
<input type="radio" onclick="constructJSON(this.name)" id="six" name="Grape" data-gpname="Grape" data-price="70" value="light"/> Light
<input type="radio" onclick="constructJSON(this.name)" id="seven" name="Grape" data-gpname="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

<textarea name="a" id="a" cols="50"></textarea>
<input type="submit" name="se" value="se" />

</form>

Script:

var rgArray = [];
function constructJSON(name)
{
  rgArray.push(name);
  var myArray = {};
  var productData = {};
  productData['products'] = createArray();
  $("#a").html(JSON.stringify(productData));
}

function createArray(){
  var group = {};
  var product;
  var data;
  var hasValue = false;
  $rgArray = $(rgArray);
  $.each($rgArray, function(i, gp){
    product = {};
    var el = "input[data-gpname='"+gp+"']";
    $el = $(el);
    hasValue = false;
    $.each($el, function(i, item){
      
      if(item.checked){
          data = {};
          data.name = $(item).val();
          data.price = $(item).attr("data-price");
            
          hasValue = true;
          product[$(item).attr("name")] = data;
        }
    });
    if(hasValue) group[gp] = product;
  });
  return group;
}

edited Jan 18, 2021 at 12:34

CommunityBot

11 silver badge

answered Sep 25, 2012 at 8:44

Moorthy

7543 silver badges6 bronze badges

5 Comments

Varun Sridharan Over a year ago

ok its working but this line var rgArray = ['apple', 'Mango', 'Pineapple', 'Grape']; should be dynamic the array value should be given from the radio button name variable

Moorthy Over a year ago

Is there any specific reason for getting radio button name dynamic?

Varun Sridharan Over a year ago

because all the radio buttone is generated dynimicaly

Moorthy Over a year ago

ok, you want to generate the json for all the radio buttons which are selected at once? I don't think you can get all at once. You can generate the output for what is currently selected if everything is dynamic.

Varun Sridharan Over a year ago

if any check box is selected in that i will provide a variable name called as data-proname for var rgArray i need that value to be inserted in rgArray

sureshunivers · Accepted Answer · 2012-09-25 06:38:21Z

1

For the multi sub array I created an example and code here

Bellow is just FYI:

In jQuery form serialize array function is used to print/show the values in array format.

$('form').submit(function() {
  console.log($(this).serializeArray());
  return false;
});

answered Sep 25, 2012 at 6:38

sureshunivers

1,75312 silver badges30 bronze badges

1 Comment

Varun Sridharan Over a year ago

i think you dont understand the question

Parv Sharma · Accepted Answer · 2012-09-21 07:14:07Z

-1

try this code i have just edited it a little

function createSubArray(name){
    var arr = [];

    elems = document.getElementsByName(name);
    for (var i=0;i<elems.length;i++){
        if (elems[i].checked){
            var o = {}
            o[name] =  elems[i].value;
            o['price'] =  elems[i].getAttribute('data-price');
            arr.push(o);
        }
    }
    return arr;

}
function createArray() {

    var myArr = [];
    myArr[0] = createSubArray('apple');
    myArr[1] = createSubArray('Mango');
    myArr[2] = createSubArray('Pineapple');
    myArr[3] = createSubArray('Grape');
    document.getElementById("a").innerHTML = JSON.stringify(myArr);
    return myArr;
}

earlier you were returning an object from the createSubArray method which i think was the mistake
i have edited it to return an array with all the objects

this is the JSON string that i was getting

[
    [
        {
            "apple": "light",
            "price": "10"
        },
        {
            "apple": "dark",
            "price": "20"
        }
    ],
    [
        {
            "Mango": "light",
            "price": "30"
        },
        {
            "Mango": "dark",
            "price": "40"
        }
    ],
    [
        {
            "Pineapple": "light",
            "price": "50"
        },
        {
            "Pineapple": "dark",
            "price": "60"
        }
    ],
    [
        {
            "Grape": "light",
            "price": "70"
        },
        {
            "Grape": "dark",
            "price": "80"
        }
    ]
]

edited Sep 21, 2012 at 7:14

answered Sep 21, 2012 at 7:08

Parv Sharma

12.7k5 gold badges52 silver badges83 bronze badges

6 Comments

Parv Sharma Over a year ago

ok i think the top level object should have been an array too.. i have edited my ans and the response string that i was getting have a look

Varun Sridharan Over a year ago

not its not the correct answer check here i need like this jsfiddle.net/yJkEE

Varun Sridharan Over a year ago

kindly check the question where 'But i need to array to be like below' is written

Parv Sharma Over a year ago

yeah i have seen that.. i think that is also not correct. can you please add a valid JSON string to teh question like the one you want?

Varun Sridharan Over a year ago

the above is not an json its an array

|

Collectives™ on Stack Overflow

Javascript Multi Sub Array

4 Answers 4

3 Comments

5 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related