Javascript Appending to 2-D Array

Question

I am trying to append an array to an array. I am expecting the output to be something like:

[[Dep,POR],[14073,99.25],[14072,0.06]]

But I am getting:

Dep,POR,14073,99.25,14072,0.06

Here's what I have so far:

  function get_historical() {
    var well = document.getElementById('wellSelect'); 
    var selected_well = well.options[well.selectedIndex].value; 
    var hist_json_obj = JSON.parse(Get("/get_historical/" + selected_well));
    hist_por = ['Dep','POR'];
    for (var item in hist_json_obj) {
      if (hist_json_obj.hasOwnProperty(item)) {
         var dep = hist_json_obj[item].dep;
         var por = hist_json_obj[item].por;

         var arr_por = [dep, parseFloat(por)];
         hist_por.push(arr_por);

      }
    }
    document.write(hist_por);
  }

Daniel Bank · Accepted Answer · 2018-11-17T17:54:56.640

When you initialize hist_por, you want that to be a 2-D array whereas you currently have just a single array. So you would want to change its instantiation to:

hist_por = [['Dep','POR']]; // [[ ... ]] instead of [ ... ]

Also per @justrusty's answer, you need to JSON.stringify(hist_por) when you pass it to document.write(). This is the more important piece so his answer should be accepted.

So the whole code block would become:

function get_historical() {
  var well = document.getElementById('wellSelect'); 
  var selected_well = well.options[well.selectedIndex].value; 
  var hist_json_obj = JSON.parse(Get("/get_historical/" + selected_well));
  hist_por = [['Dep','POR']];
  for (var item in hist_json_obj) {
    if (hist_json_obj.hasOwnProperty(item)) {
       var dep = hist_json_obj[item].dep;
       var por = hist_json_obj[item].por;

       var arr_rop = [dep, parseFloat(por)];
       hist_por.push(arr_por);

    }
  }
  document.write(JSON.stringify(hist_por));
}

You don't even need to instantiate it as 2D, it's literally just the way it gets printed out with document.write(). My advice is to ALWAYS log to console so you can see the real values and how they are organised. — justrusty, Nov 17 '18 at 18:34

justrusty · Answer 2 · 2018-11-17T18:42:09.737

This may help you https://codepen.io/anon/pen/xQLzXx

var arr = ['foo','bar'];
var arr2 = ['baz', 'boo']
arr.push(arr2);
console.log(arr);
document.write(arr);
document.write("<br>");
document.write(JSON.stringify(arr));

It's basically just the way it writes it to document. If you log it in console you'll see the array appended. Or if you JSON.stringify() first it will show as you expect.

My advice is ALWAYS console.log() so you can see exactly how the data is structured

score 1 · Answer 3 · answered Nov 17 '18 at 18:05

The others have already pointed out what the problem is (+ there's a typo in one of your variable names - arr_rop vs arr_por). Here's an ES6 version that will break in older browsers, for learning purposes:

function get_historical() {
  const well = document.getElementById('wellSelect');
  const selected_well = well.options[well.selectedIndex].value;
  const hist_json_obj = JSON.parse(Get("/get_historical/" + selected_well));

  const hist_por = Object.values(hist_json_obj).reduce(
    (arr, item) => [...arr, [item.dep, +item.por]],
    [["Dep", "POR"]]
  );

  document.write(JSON.stringify(hist_por));
}

Javascript Appending to 2-D Array

3 Answers3

Linked