Function output replaces first two rows of my main JSON string

Question

I have a JSON query and I am using console.log to present it:

var json_data = {"headers":["Month","Value","Number"],"rows":[["2018-10-01 00:00:00.0","one",209],["2018-09-01 00:00:00.0","one",274],["2018-09-01 00:00:00.0","five",183],["2018-10-01 00:00:00.0","five",164],["2018-09-01 00:00:00.0","four",214],["2018-10-01 00:00:00.0","four",192],["2018-09-01 00:00:00.0","three",128],["2018-10-01 00:00:00.0","three",125],["2018-09-01 00:00:00.0","two",199],["2018-10-01 00:00:00.0","two",169],["2018-09-01 00:00:00.0","seven",10541],["2018-10-01 00:00:00.0","seven",6139],["2018-10-01 00:00:00.0","six",169],["2018-09-01 00:00:00.0","six",233]]};

document.getElementById("original").innerHTML = json_data.rows;

<div style="background:yellow; "id="original"></div>
<div style="background:red;" id="output"></div>

And for the value "one" I have two numbers (209 and 274).

I am then using a function to groupby which works fine (output). My problem is that when I use the console.log for the initial json_data query, the first two rows are different. It seems that my function replaced the first two rows with the rows of the output (red). The function is given here:

    function initialGroupBy(rows) {
  const 
    rowMap = new Map(),
    result = [],
    dataTemp = [];

  // Iterate over the rows.
  rows.forEach(row => {

    const
      // Create a key, it is the first elements joined together.
      key = row.slice(0,1).join();

    // Check if the Map has the generated key...
    if (rowMap.has(key)) {
      // The map has the key, we need to add up the values
      const
        // Get the value for the current key.
        storedRow = rowMap.get(key);
        // Add the value of the current row to the row in the map.
        storedRow[2] += row[2];

    } else {
      // The key doens't exist yet, add the row to the map.
      rowMap.set(key, row);
    }

  });

  // Iterate over all the entries in the map and push each value with the
  // summed up value into the array.
  rowMap.forEach(value => {
    result.push(value);
  });


    for (i = 0; i < result.length; i++) 
    {
    var object2 = {"date": result[i][0].slice(0,7), "num": result[i][2]};
    dataTemp.push(object2);      
    }

    return dataTemp;

}

A full snippet can be found here (Compare the first two rows of the yellow box from the two snippets):

var json_data = {"headers":["Month","Value","Number"],"rows":[["2018-10-01 00:00:00.0","one",209],["2018-09-01 00:00:00.0","one",274],["2018-09-01 00:00:00.0","five",183],["2018-10-01 00:00:00.0","five",164],["2018-09-01 00:00:00.0","four",214],["2018-10-01 00:00:00.0","four",192],["2018-09-01 00:00:00.0","three",128],["2018-10-01 00:00:00.0","three",125],["2018-09-01 00:00:00.0","two",199],["2018-10-01 00:00:00.0","two",169],["2018-09-01 00:00:00.0","seven",10541],["2018-10-01 00:00:00.0","seven",6139],["2018-10-01 00:00:00.0","six",169],["2018-09-01 00:00:00.0","six",233]]};

function initialGroupBy(rows) {
  const 
    rowMap = new Map(),
    result = [],
    dataTemp = [];
    
  // Iterate over the rows.
  rows.forEach(row => {
  
    const
      // Create a key, it is the first elements joined together.
      key = row.slice(0,1).join();
      
    // Check if the Map has the generated key...
    if (rowMap.has(key)) {
      // The map has the key, we need to add up the values
      const
        // Get the value for the current key.
        storedRow = rowMap.get(key);
        // Add the value of the current row to the row in the map.
        storedRow[2] += row[2];
        
    } else {
      // The key doens't exist yet, add the row to the map.
      rowMap.set(key, row);
    }

  });
  
  // Iterate over all the entries in the map and push each value with the
  // summed up value into the array.
  rowMap.forEach(value => {
    result.push(value);
  });
    

 for (i = 0; i < result.length; i++) 
 {
    var object2 = {"date": result[i][0].slice(0,7), "num": result[i][2]};
    dataTemp.push(object2);      
 }

 return dataTemp;

}

const damn = initialGroupBy(json_data.rows);

 
document.getElementById("original").innerHTML = json_data.rows;
document.getElementById("output").innerHTML =JSON.stringify(damn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="background:yellow; "id="original"></div>
<br><br>
<div style="background:red;" id="output"></div>

I have tried changing the var to const in many cases. Am I missing a fundamental JavaScript case here?

score 0 · Answer 1 · answered Oct 12 '18 at 14:27

A) The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable -> Link

B) Your problem is that you are actually editing the original object in the initialGroupBy function. Maybe this answer will be helpful.

score 0 · Accepted Answer · edited Oct 12 '18 at 15:49

As your value is an Array object, when you save it in your temporary Map, you're actually using a reference to your original data structure row.

So in the first forEach loop, where you sum the values you're actually changing the original array entry.

The solution is pretty simple, just clone the array:

rowMap.set(key, row.slice());

Another possibility is to use a different array to save the totals.

Here is your code with the fix.

var json_data = {"headers":["Month","Value","Number"],"rows":[["2018-10-01 00:00:00.0","one",209],["2018-09-01 00:00:00.0","one",274],["2018-09-01 00:00:00.0","five",183],["2018-10-01 00:00:00.0","five",164],["2018-09-01 00:00:00.0","four",214],["2018-10-01 00:00:00.0","four",192],["2018-09-01 00:00:00.0","three",128],["2018-10-01 00:00:00.0","three",125],["2018-09-01 00:00:00.0","two",199],["2018-10-01 00:00:00.0","two",169],["2018-09-01 00:00:00.0","seven",10541],["2018-10-01 00:00:00.0","seven",6139],["2018-10-01 00:00:00.0","six",169],["2018-09-01 00:00:00.0","six",233]]};

function initialGroupBy(rows) {
  const 
    rowMap = new Map(),
    result = [],
    dataTemp = [];
    
  // Iterate over the rows.
  rows.forEach(row => {
  
    const
      // Create a key, it is the first elements joined together.
      key = row.slice(0,1).join();
      
    // Check if the Map has the generated key...
    if (rowMap.has(key)) {
      // The map has the key, we need to add up the values
      const
        // Get the value for the current key.
        storedRow = rowMap.get(key);
        // Add the value of the current row to the row in the map.
        storedRow[2] += row[2];
        
    } else {
      // The key doens't exist yet, add the row to the map.
      rowMap.set(key, row.slice());
    }

  });
  
  // Iterate over all the entries in the map and push each value with the
  // summed up value into the array.
  rowMap.forEach(value => {
    result.push(value);
  });
    

 for (i = 0; i < result.length; i++) 
 {
    var object2 = {"date": result[i][0].slice(0,7), "num": result[i][2]};
    dataTemp.push(object2);      
 }

 return dataTemp;

}

const damn = initialGroupBy(json_data.rows);

 
document.getElementById("original").innerHTML = json_data.rows;
document.getElementById("output").innerHTML =JSON.stringify(damn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="background:yellow; "id="original"></div>
<div style="background:red;" id="output"></div>

I have pasted my answer after a help from a JS developer. Yours works fine too! — Datacrawler, Oct 12 '18 at 15:04
Your answer is about using the right approach, and that is fine. Actually both are good, as mine is mostly about the actual issue of the OP. — Mario Santini, Oct 12 '18 at 16:49
Yep. That's why I accepted yours. You answered to the issue. I have just pasted a good alternative. — Datacrawler, Oct 12 '18 at 16:56

score 0 · Answer 3 · answered Oct 12 '18 at 15:04

A different logic applies here and the result is handy:

var json_data = {"headers":["Month","Value","Number"],"rows":[["2018-10-01 00:00:00.0","one",209],["2018-09-01 00:00:00.0","one",274],["2018-09-01 00:00:00.0","five",183],["2018-10-01 00:00:00.0","five",164],["2018-09-01 00:00:00.0","four",214],["2018-10-01 00:00:00.0","four",192],["2018-09-01 00:00:00.0","three",128],["2018-10-01 00:00:00.0","three",125],["2018-09-01 00:00:00.0","two",199],["2018-10-01 00:00:00.0","two",169],["2018-09-01 00:00:00.0","seven",10541],["2018-10-01 00:00:00.0","seven",6139],["2018-10-01 00:00:00.0","six",169],["2018-09-01 00:00:00.0","six",233]]};


function groupBy(accumulator, item) {
const [date,extra,value] = item;

const key = date.slice(0,7);

if(!accumulator[key]){
accumulator[key] = 0
}

accumulator[key] += value;
return accumulator;

}

var damn = json_data.rows.reduce(groupBy,{});

damn = Object.keys(damn).map(function(key){
return {date: key, Value: "Total", num: damn[key]};
})

document.getElementById("original").innerHTML = json_data.rows;
document.getElementById("output").innerHTML =JSON.stringify(damn);

<div style="background:yellow; "id="original"></div>
<div style="background:red;" id="output"></div>

Function output replaces first two rows of my main JSON string

3 Answers3