Adding data from one object to another in Javascript results in duplicated entries

Question

Adding data from one object to another in Javascript results in duplicated entries

Despite my efforts to find a solution for my issue, I couldn't locate a relevant topic. Being new to Javascript, I suspect my lack of understanding is hindering me from resolving the problem. After days of trying, I'm still unable to grasp it. Any help would be greatly appreciated - thank you.

Issue: I am attempting to map data from a JSON object retrieved from an API (Source) to a different data structure (Result). Strangely, duplicates are being generated in my assignment, even though I believe I am explicitly assigning to only one position in the data object.

I apologize for the lengthy code example, but the problem lies at the very end of it. In the debugger, I can observe that in each iteration of the loop, all values are assigned to all result series.data - despite not understanding why.

Below is my code:


function Sample(){

    // Source data from the API simplified
    var SourceData = {
        "hits": 4,
        "job": [
            {
                "status": "FINISHED",
                "type": "IMPORT",
            },
            {
                "status": "FAILED",
                "type": "EXPORT",
            },
            {
                "status": "RUNNING",
                "type": "TRANSCODE",
            },
            {
                "status": "FINISHED",
                "type": "TRANSCODE",
            }
        ]
    };

    // Helper variable
    var status = [];


    //Initialize Result data object
    var ResultData = {
    labels: [],
    series: []
    };

    // Used to to extend the Result Data Object later
    var placeholderSeries = {name:'', data: []}

    // Get job types and Status from SourceData and write as labels and series.name to result object without duplicates 
    for (var i=0; i < SourceData.job.length; i++){

        var typeExists = ResultData.labels.indexOf(SourceData.job[i].type);
        var statusExists = status.indexOf(SourceData.job[i].status);

        if (typeExists == -1){
        ResultData.labels.push(SourceData.job[i].type);
        ResultData.labels.sort();
        }

        if (statusExists == -1){

        // Fill array with Status values without duplicates
        status.push(SourceData.job[i].status);
        // Fill result data with empty sub structure
        ResultData.series.push(placeholderSeries);
        }
    }

  // Write a series name for each job status corresponding with the status values of the source
 for(var i=0; i < ResultData.series.length; i++)
  {
      // THIS LINE DOESN'T WORK AS I WOULD EXPECT
      ResultData.series[i].name = status[i]; 
   }
   console.log(JSON.stringify(ResultData,null,4));
}

The Outcome I get is:


{
    "labels": [
        "EXPORT",
        "IMPORT",
        "TRANSCODE"
    ],
    "series": [
        {
            "name": "RUNNING",
            "data": []
        },
        {
            "name": "RUNNING",
            "data": []
        },
        {
            "name": "RUNNING",
            "data": []
        }
    ]
}

The Expected Outcome should be:

{
    "labels": [
        "EXPORT",
        "IMPORT",
        "TRANSCODE"
    ],
    "series": [
        {
            "name": "FINISH",
            "data": []
        },
        {
            "name": "FAILED",
            "data": []
        },
        {
            "name": "RUNNING",
            "data": []
        }
    ]
}

javascript arrays json object

Answer 1

Answer №1

function Sample() {
        // Data obtained from simplified API source
        var SourceData = {
            hits: 4,
            job: [
                {
                    status: "FINISHED",
                    type: "IMPORT"
                },
                {
                    status: "FAILED",
                    type: "EXPORT"
                },
                {
                    status: "RUNNING",
                    type: "TRANSCODE"
                },
                {
                    status: "FINISHED",
                    type: "TRANSCODE"
                }
            ]
        };

        // Helper variable to store unique statuses
        var status = [];

        //Initialize Result data object structure
        var ResultData = {
            labels: [],
            series: []
        };


        // Extract job types and Status from SourceData and organize as labels and series.name in result object without duplicates
        for (var i = 0; i < SourceData.job.length; i++) {
            var typeExists = ResultData.labels.indexOf(SourceData.job[i].type);
            var statusExists = status.indexOf(SourceData.job[i].status);
            
            if (typeExists == -1) {
                ResultData.labels.push(SourceData.job[i].type);
                ResultData.labels.sort();
            }

            if (statusExists == -1) {
                // Populate array with unique Status values
                status.push(SourceData.job[i].status);
                // Build empty sub structure in result data 
                var placeholderSeries = { name: "", data: [] };
                ResultData.series.push(placeholderSeries);
            }
        }

        // Assign a series name for each job status based on the status values from the source
        for (var i = 0; i < ResultData.series.length; i++) {
            // CORRECTION NEEDED HERE
            ResultData.series[i].name = status[i];
        }
        console.log(JSON.stringify(ResultData, null, 4));
    }
    Sample();

You have incorrectly utilized reference type. You have duplicated the same placeholderSeries in the array multiple times, essentially adding the same object.

With reference types, you're not storing the value itself, but rather a reference to it, enabling multiple variables to point to the same value.

For instance:

var x = {"name": "John"};
var y = x;
y.name = "John2";

Both x and y will be affected since they both refer to the same object.

To resolve this issue, move the declaration of placeholderSeries inside the loop. This way, a new object will be created in each iteration.

Answer 2

function Sample() {
        // Data obtained from simplified API source
        var SourceData = {
            hits: 4,
            job: [
                {
                    status: "FINISHED",
                    type: "IMPORT"
                },
                {
                    status: "FAILED",
                    type: "EXPORT"
                },
                {
                    status: "RUNNING",
                    type: "TRANSCODE"
                },
                {
                    status: "FINISHED",
                    type: "TRANSCODE"
                }
            ]
        };

        // Helper variable to store unique statuses
        var status = [];

        //Initialize Result data object structure
        var ResultData = {
            labels: [],
            series: []
        };


        // Extract job types and Status from SourceData and organize as labels and series.name in result object without duplicates
        for (var i = 0; i < SourceData.job.length; i++) {
            var typeExists = ResultData.labels.indexOf(SourceData.job[i].type);
            var statusExists = status.indexOf(SourceData.job[i].status);
            
            if (typeExists == -1) {
                ResultData.labels.push(SourceData.job[i].type);
                ResultData.labels.sort();
            }

            if (statusExists == -1) {
                // Populate array with unique Status values
                status.push(SourceData.job[i].status);
                // Build empty sub structure in result data 
                var placeholderSeries = { name: "", data: [] };
                ResultData.series.push(placeholderSeries);
            }
        }

        // Assign a series name for each job status based on the status values from the source
        for (var i = 0; i < ResultData.series.length; i++) {
            // CORRECTION NEEDED HERE
            ResultData.series[i].name = status[i];
        }
        console.log(JSON.stringify(ResultData, null, 4));
    }
    Sample();

You have incorrectly utilized reference type. You have duplicated the same placeholderSeries in the array multiple times, essentially adding the same object.

With reference types, you're not storing the value itself, but rather a reference to it, enabling multiple variables to point to the same value.

For instance:

var x = {"name": "John"};
var y = x;
y.name = "John2";

Both x and y will be affected since they both refer to the same object.

To resolve this issue, move the declaration of placeholderSeries inside the loop. This way, a new object will be created in each iteration.

Answer 3

Answer №2

When working with newer versions of JavaScript, the map function can be utilized in the following manner:

// Here is a simplified example using data from an API
const sourceData = {
    "hits": 4,
    "job": [
        {
            "status": "FINISHED",
            "type": "IMPORT"
        },
        {
            "status": "FAILED",
            "type": "EXPORT"
        },
        {
            "status": "RUNNING",
            "type": "TRANSCODE"
        },
        {
            "status": "FINISHED",
            "type": "TRANSCODE"
        }
    ]
};

const labels = [...new Set(sourceData.job.map(item => item.type))];
const uniqueStatuses = [...new Set(sourceData.job.map(item => item.status))];

const resultData = {
    labels,
    series: uniqueStatuses.map(item =>({"name": item, data: []}))
};

console.log(JSON.stringify(resultData, null, 4));

Answer 4

When working with newer versions of JavaScript, the map function can be utilized in the following manner:

// Here is a simplified example using data from an API
const sourceData = {
    "hits": 4,
    "job": [
        {
            "status": "FINISHED",
            "type": "IMPORT"
        },
        {
            "status": "FAILED",
            "type": "EXPORT"
        },
        {
            "status": "RUNNING",
            "type": "TRANSCODE"
        },
        {
            "status": "FINISHED",
            "type": "TRANSCODE"
        }
    ]
};

const labels = [...new Set(sourceData.job.map(item => item.type))];
const uniqueStatuses = [...new Set(sourceData.job.map(item => item.status))];

const resultData = {
    labels,
    series: uniqueStatuses.map(item =>({"name": item, data: []}))
};

console.log(JSON.stringify(resultData, null, 4));

Answer 5

Answer №3

statusExists is always = -1
You are constantly using .push(placeholderSeries);
placeholderSeries remains the same object each time (
```
var placeholderSeries = { name: '', data: [] }
```
)

During the final iteration loop:

  // status:  [ 'FINISHED', 'FAILED', 'RUNNING' ]
  for (var i = 0; i < ResultData.series.length; i++) {
    // THIS LINE IS NOT WORKING AS EXPECTED
    ResultData.series[i].name = status[i];
  }

We are assigning the value of a single object to 'RUNNING'

Answer 6

statusExists is always = -1
You are constantly using .push(placeholderSeries);
placeholderSeries remains the same object each time (
```
var placeholderSeries = { name: '', data: [] }
```
)

During the final iteration loop:

  // status:  [ 'FINISHED', 'FAILED', 'RUNNING' ]
  for (var i = 0; i < ResultData.series.length; i++) {
    // THIS LINE IS NOT WORKING AS EXPECTED
    ResultData.series[i].name = status[i];
  }

We are assigning the value of a single object to 'RUNNING'

Adding data from one object to another in Javascript results in duplicated entries

Answer №1

Answer №2

Answer №3

Similar questions

Deleting all JSON files in a directory using NodeJs

What is the best way to extract a JSON value and use it across multiple functions?

Are HTML's Regular Expressions the Equivalent of JavaScript's Regular Expressions?

What steps can be taken to avoid the appearance of the JavaScript prompt "Leaving site"?

Seeking a quick conversion method for transforming x or x[] into x[] in a single line of code

Tips on how to trigger the function upon receiving the response value by concurrently running two asynchronous functions

Applying CSS to an iframe using JavaScript: A Step-by-Step

Parsing issues arise when parsing large JSON objects in the rtweet package

Retrieve JSON data from an SQL query that includes the term "MariaDB."

What is the process for retrieving the value of `submit.preloader_id = "div#some-id";` within the `beforesend` function of an ajax call?

Tips for hiding a soft keyboard with jQuery

Is it possible to include two functions within a single HTML script?

Techniques for manipulating multiple circles with JavaScript

Trouble with Mocha async hooks execution?

Having trouble displaying the output on my console using Node.js

Invoke a jQuery method in a dynamic manner

Is there a method to pre-load a CSS background image so that it can still be displayed even without an internet connection?

Different Zoom feature for JIT Graph

Load JavaScript files in order within the <body> tag and trigger a callback function when all files have

Is there a way to tally the frequency of a specific property appearing in one array within another, and then transfer those matches into a separate array?