Creating an array in JavaScript from JSON file

Question

My JSON file:

[{"val0":"Paul","val1":"Jake","val2":null,"val3":"Max"},
 {"val0":"Sam","val1":"Tina","val2":"Emily","val3":"Hardwell"},
 {"val0":"Tom","val1":"Julie","val2":null,"val3":"Adi"}]

I want to create an array in javascript as follows:

var dataSet=[
  ['Paul','Jake','null','Max'],
  ['Sam','Tina','Emily','Harwell'],
  ['Tom','Julie','null','Adi']
];

I tried the following code but it isn't working. Can anybody please help?

$.getJSON("filename.json", function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push(val);
  });
  // …
});

I'm using this array for display purpose (using DataTables), so, I want to create the array in that format.I'm using the dataSet array for displaying in DataTables as follows:

var dataSet = [
    ['Paul','Jake','Isha','Mike','null','null','Parth','Tinker'],
    ['Tina','Michael','null','Blue','Red','','Emily','Mina']
];

$(document).ready(function() {
    $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
    $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Name" },
            { "title": "Deadline" },
            { "title": "Additional fees" },
            { "title": "Requirements" },
            { "title": "Field" },
            { "title": "Award" },
            { "title": "Renewable requirements"},
            { "title": "Link" }
        ]
    } );
} );

Answer 1

A solution without jquery:

 var data = [ { "val0": "Paul", "val1": "Jake", "val2": null, "val3": "Max" }, { "val0": "Sam", "val1": "Tina", "val2": "Emily", "val3": "Hardwell" }, { "val0": "Tom", "val1": "Julie", "val2": null, "val3": "Adi" } ], dataSet = data.reduce(function (r, a) { var i, a0 = []; for (i in a) { a0.push(a[i]); } r.push(a0); return r; }, []); document.getElementById('out').innerHTML = JSON.stringify(dataSet, null, 4); 

 <pre id="out"></pre> 

Answer 2

You get an array of objects, and you want an array of arrays, so convert each object to an array by reading the properties of the object:

var items = [];
$.each( data, function( key, val ) {
  items.push([val.val0,val.val1,val.val2,val.val3]);
});

Answer 3

Try this

<script>
  $(function() {

    $.getJSON("filename.json", function(data) {
      var items = [];
      $.each(data, function(key, val) {

          var tmp = [];
          for (var Key in val) {
            tmp.push(val[Key]);
          }

        items.push(tmp);
      });
      console.log(items);
    });

  });

Answer 4

One liner:

var dataSet = rawData.map(function(e){ return Object.keys(e).map(function(i){ return e[i]}); })

Output:

Output as JSON:

Method explanation (from Javascript Reference)

1. The map() method creates a new array with the results of calling a provided function on every element in this array.

2. The Object.keys() method returns an array of a given object's own enumerable properties