CODEWITHSUNDEEP
javascriptphpjqueryarrays
Brian Powell
Brian Powell

Reputation: 3411

most efficient way to create javascript array out of various php arrays

I have a form that a user can submit multiple times, adding different information each time.

These form inputs are translated into php $_SESSION arrays, so each time the user hits the submit button, the array grows. This is working fine.

I need to bring these over into javascript but I'm not sure what the most efficient way is to build the dataSet array.

dateReceived = <?php echo json_encode($_SESSION['dateReceived']);?>;
name = <?php echo json_encode($_SESSION['name ']);?>;
color = <?php echo json_encode($_SESSION['color ']);?>;

Each of these variables will be the same length always (e.g. - the first time the user presses the button their length will all be 1, then it will be 2, etc...), so I need to create an array in javascript that looks like this:

dataSet = [
  [dateReceived[0],name[0],color[0]],
  [dateReceived[1],name[1],color[1]],
  etc...
  ];

What's the most efficient way to go about this? I tried using dateReceived.length to grow the array over each iteration of the user's button press, but it's just writing the latest set of data and not growing the array:

for (i = 0; i < dateReceived.length; i++ ) {
  dataSet = [
    [dateReceived[i],name[i],color[i]],
  ]
}

I would love it if someone could help fix the syntax/logic issue in my for loop, but also advise whether not this is an efficient way of doing this in the first place.

Upvotes: 2

Views: 78

Answers (3)

Phil
Phil

Reputation: 2313

Depending on your situation, it may be easier to do it server side. If you are talking about a user form, the number of items will probably be sufficiently low to not make a noticable difference what method you use. So I personally wouldn't worry about efficiency at this stage.

<?php

$date_list = $_SESSION['dateReceived'];
$name_list = $_SESSION['name '];
$color_list = $_SESSION['color '];

$my_data = array();
for ($index = 0; $index < count($date_list); $index++) {
    $my_data[] = array($date_list[$index], $name_list[$index], $color_list[$index]);
}

?>
var dataSet = <?php echo json_encode($my_data, true); ?>

Upvotes: 0

theWanderer4865
theWanderer4865

Reputation: 871

So you have 3 arrays, all with the same length and consistent indexing. I'll assume that will always be the case.

var dataSet = [];
dateReceived.map(function(item, index) {
  dataSet.push([item, color[index], name[index]);
});

Now you are appending an array to your dataSet array! Magic!

The problem here is that JS Arrays are pointers and not literal representations of slices in memory. In your loop you are simply overwriting your data.

In addition, JavaScript has a lot of great functional programming utilities (it is arguably a functional programming language) so I would encourage using them when appropriate.

If you need to have this update frequently, you'll want to register an event listener with your front-end code on the 'change' event. BUT this will only work as a one-shot solution. Once you have the initial state set up you'll want to only operate on the new data (otherwise you'll be iterating over an ever-growing array over and over again). In that case you'll want to be keeping track of the last index used or throw away data that hasn't been aggregated so you'll only be operating on the fresh, tasty data.

See: Array.map Array.push

Upvotes: 1

lordterrin
lordterrin

Reputation: 171

John,

Try this:

var dataSet = [];


  for (i = 0; i < mfrPartNumber.length; i++ ) {
    data = [dateReceived[i],name[i],color[i]];

    dataSet.push(data);

  }

This will build an array out of each instance of [i], and keep growing as your user keeps pushing the button.

Upvotes: 1

Related Questions