CODEWITHSUNDEEP
javascriptarraysd3.js
Dominic
Dominic

Reputation: 33

'push' new number into an array of objects

I have a long list of dates stored in a CSV file. I have managed to load this dataset successfully using d3.js. Now I want to add another column to this dataset containing a random number for each date in my list.

I believe this dataset has been loaded as an array of objects. So I am using the code below to try and iterate through the array. I think the push method is the wrong way to do it, though, as this involves objects.

d3.csv('claims_cwy.csv', rowConverter, function(dataset) {
    console.log(dataset);

    for(var i=0; i<10; i++) {           
        var newNumber = Math.round(Math.random() * 10);
        dataset[i].push(newNumber);
    }

my dataset

Upvotes: 1

Views: 2423

Answers (4)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Despite this question having several answers, none of them deals with the idiomatic D3:

Since you already have a row conversion function, use that function to change the objects in the data array. Just add this to the row function (using d as the first parameter):

d.random = Math.random() * 10;
//  ^----- or any other property name

Here is a demo:

var csv = `foo,bar,baz
12,34,21
14,42,27
17,35,17`;

var data = d3.csvParse(csv, rowConverter);

function rowConverter(d) {
  d.random = Math.random() * 10;
  return d;
}

console.log(data)
<script src="https://d3js.org/d3.v4.min.js"></script>

Upvotes: 3

Bryan
Bryan

Reputation: 687

You can do this nice and neatly with the array map() method. From MDN:

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

So for each element in your dataset array you return the original properties and also add the new random_number property.

See the working fiddle

var dataset = [
    {"date": "02/10/2017", "climb": "696"},
    {"date": "04/10/2017", "climb": "1004"},
    {"date": "06/10/2017", "climb": "1516"},
    {"date": "13/10/2017", "climb": "932"},
    {"date": "15/10/2017", "climb": "2005"}
];

dataset = dataset.map(function(d) {
  return {
      "date": d.date,
      "climb": d.climb,
      "random_number": Math.round(Math.random() * 10)
  }
});

It's worth mentioning, as you're using d3, that you could use one of the various random number methods in the d3-random module instead of Math.random().

Upvotes: 0

Eslam Nasser
Eslam Nasser

Reputation: 76

If you want to add a random number to each object in the array this is the way:

for(var i = 0; i < 10; i++) {           
    var newNumber = Math.round(Math.random() * 10);
    dataset[i]['random_number'] = newNumber;
}

This will create a new property called random_number for each object

Upvotes: 0

Giannis Mp
Giannis Mp

Reputation: 1299

You could try this:

d3.csv('claims_cwy.csv', rowConverter, function(dataset) {
    console.log(dataset);

    for(var i=0; i<dataset.length; i++) {           
        var newNumber = Math.round(Math.random() * 10);
        dataset[i].nameOfProperty = newNumber;
    }
}

You get each object from the array and give it a new property with the random number in it.

Upvotes: 1

Related Questions