How to create a Jquery array object

Question

I have to pass values to highChart in following format

data: [
     ['Firefox',   45.0],
     ['IE',       26.8],
]

I have the values in a table something like this

<table>
    <tr>
        <th colspan="2">
            <div align="left">Expenditure in, or on behalf of, Scotland </div>            
        </th>
    </tr>
    <tr class="row">
        <td>Public sector debt interest</td>
        <td><?php echo $x ?>></td>
    </tr>
    <tr class="row">
        <td>Public sector debt interest</td>
        <td><?php echo $x ?>></td>
    </tr>
</table>

I trying to create array from the table like this but its not working

$('.row').each(function (i) {
    var data = [];
    $(this).find('td').each(function (j, v) {
        if (j == 0)
            var label = $(this).html();
        else {
            var val = $(this).html();
            data[label] = val;
        } 
    });
});

Can any one please help me out where I am doing the mistake

Thanks in advance

Rory McCrossan · Accepted Answer · 2015-01-29 11:06:27Z

2

The data structure you're trying to create is an array containing arrays. It is a native JS construct and has nothing to do with jQuery. The issue you have is that you're trying to create an array item by providing a key/value pair, which is fine for objects but won't work here.

Firstly, the parent array needs to be defined outside the each. Then you need to create a new array for each row and push it to the parent array. You don't need to loop over the td elements as you need to get both at the same time to create the array item. Try this:

var data = [];
$('.row').each(function (i) {
    var label = $(this).find('td').eq(0).text(); // get value of the first td as a number
    var value = parseFloat($(this).find('td').eq(1).text()); // and the second
    data.push([label, value]); // add the new item to the array
});

Example fiddle

edited Jan 29, 2015 at 11:06

answered Jan 29, 2015 at 10:28

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

5 Comments

Vikram Anand Bhushan Over a year ago

I tried to implement the array into the script but it trhows error jsfiddle.net/n48w6rt3/1

Rory McCrossan Over a year ago

Your HTML is incorrect as the table is inside a script tag

Vikram Anand Bhushan Over a year ago

thank you very much , I tried to add the actual content of the table , Since you were changing the Label also into Float val the names were not appearing , I changes that to normal string , But the size of the chart became very small can you help me fix this please jsfiddle.net/n48w6rt3/3

Rory McCrossan Over a year ago

@Vikram ah yes, sorry my bad :D

Vikram Anand Bhushan Over a year ago

also I am trying to add another half of the chart using similar table , is it possible to do in the same script ?

Guffa · Accepted Answer · 2015-01-29 10:35:13Z

You are declaring the variable data inside the callback function. That means that it will be recreated for each row, and that it won't be available once you looped through all the rows. Declare it outside the loop.

You put the values in the variable in the form of a property, not an array item. That means that the array is still empty. Create an array, and add to the array data.

You declare the variable label inside the callback function for the inner each, so it will go away and be recreated when the callback is called the second time for the second cell. Declare label outside that loop to keep the value between the calls.

The value should be numeric in the result, not a string, so you should parse it.

var data=[];
$('.row').each(function (i) {
  var label, val;
  $(this).find('td').each(function (j, v) {
    if (j == 0) {
      label = $(this).html();
    } else {
      val = parseFloat($(this).html());
      data.push([ label, val ]);
    } 
  });
});

Collectives™ on Stack Overflow

How to create a Jquery array object

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related