JavaScript: push()ing a string into array is returning **null**

Question

Considering the following input:

{
    "algorithm_run": "mean: 07/02/2018 02:38:09F1 (Mhz) mean",
    "id": 12,
    "parameter": "F1 (Mhz) mean",
    "runs": "2017-09-19 15:41:00(0:00:59.350000)",
    "start_time": "2017-09-19 15:41:00",
    "value": 13.5629839539749
}

Calling the following function on the URL containing that JSON:

function getScatterPlotRunData(url_string) {
    $.getJSON(url_string, function(data) {
        var graph_data = [];
        for (i = 0; i < data.length; i++) {
            graph_data.push({
                "x" : i,
                "y" : data[i].value,
                "z" : data[i].start_time
            });
        };
        drawScatterPlot(graph_data, data[0].parameter);
    });
}

The idea is to build an array with:

{
    x: index of loop,
    y: value from data[i].value,
    z: time stamp string from data[i].start_time
}

My current output is returning the time stamp as null:

{
    x: 0
    y: 13.5629839539749
    z: null
}

I've tried many things. Turning start_time.toString() (but it's already a string!), calling the function on a separate environment, rewriting the whole thing.

I am not sure what I'm doing wrong here at all.

I would greatly appreciate any help. It's probably due to a data type quirkiness that I yet don't know, being a junior developer.

Thanks to all in advance.

[EDIT] To answer some questions in the comments:

The JSON conming in is valid. In fact, the input at the top of the post is copied from the console. I just deleted the URLs.

Logging to the console at several stages reveals the following:

console.log(data) right after defining the function:

"$.getJSON(url_string, function(data) {
    console.log(data);
    ... // Rest of code
    // Reveals entire valid JSON, with all fields as they should be. EG: 
    >>> start_time": "2017-09-19 15:41:00" // not NULL

console.log(data) right after the for loop and inside the loop:

for (i = 0; i < data.length; i++) {
    console.log(data);
    ...
    // Reveals entire JSON, with all fields as they should be. EG: 
    >>> start_time": "2017-09-19 15:41:00" // not NULL

    console.log(typeof data);
    >>> object // Still valid JSON

    console.log(typeof graph_data);
    >>> object // Array is type object.

    console.log(graph_data);
    >>> [] // Array is empty.

console.log(graph_data) right after calling graph_data.push():

graph_data.push({
    "x" : i,
    "y" : data[i].value,
    "z" : data[i].start_time
});
    console.log(graph_data);
    >>>0: {x: 0, y: 13.5629839539749, z: null}
    // All values for time stamp are now null.

After further testing just now:

graph_data.push({
    "x" : i,
    "y" : data[i].value,
    "z" : i
});
    console.log(graph_data);
    >>>z: 1
    // I can insert as many Key : Value pairs as I want
    // As long as values are integers.

Inserting other values:

graph_data.push({
    "x" : i,
    "y" : data[i].value,
    "z" : "Foo"
});
    console.log(graph_data);
    >>>z: null
    // Hard coding a "string" gives me a null value.

The problem lies into trying to .push() a string as the value. I can insert any string as the key, but it's not taking in strings for the value.

Any ideas as to why this is?

Answer 1

Your code is a bit complex, first, could you use the following instead:

function convertCollectionElement(input, index){
    return {
      "x": index,
      "y": input.value,
      "z": input.start_time
    };
}

function convertCollection(inputs){
    return inputs.map(convertCollectionElement);
}

function checkForNullity(input, index){
    if(input.z === null){
      throw new Error("z was null on : "+JSON.stringify(input));
    }
}

function getScatterPlotRunData(url_string) {
    $.getJSON(url_string, function(data) {
        var graph_data = convertCollection(data);
        
        //result of conversion
        graph_data.forEach(checkForNullity);
        
        drawScatterPlot(graph_data, data[0].parameter);
        
        //verify that "drawScatterPlot" didn't mofidy our data
        graph_data.forEach(checkForNullity);
    });
}

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

I believe this will be sufficient to answer your question and resolve this mystery :)

good luck!