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

The Socket IO Client is receiving a different object than the one that was sent by the Server

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

Perform multiple function invocations on a single variable using JavaScript

Using JSON format to pass variables in C# programming language

Can you guide me in utilizing this API endpoint efficiently to enable search functionality using React Query?

What steps can be taken to enhance the efficiency of this complex nested asynchronous loop?

Token generated by Sinch backend for use with Javascript and Android applications

The color of the SVG is not visible in the PNG rendition

Obtain an array from JSON within Azure Data Factory with this simple guide

What are the steps to integrate TypeScript into JavaScript code?

What is causing the #reset button to trigger the Flow.reset() function when the #gameboard does not contain any child elements?

What's the best way to fill checkboxes in EJS when editing a route?

Ways to conceal images until AFTER the completion of the jquery flexslider loading process

Utilize arrays in Java with Selenium WebDriver for optimal performance

Running Handlebars using NodeJS can sometimes result in a "Cannot find module './parser'" error

Exploring the possibilities of infinite scroll in JavaScript using the Backbone framework

How can I set a value using document.getElementById(idPopUPImage).innerHTML to create a static popup in Leaflet?

Can you tell me the JSONPATH symbol that signifies a mismatch with a regular expression?

Generating a JSON object based on the selection of dynamic checkboxes

Error: Unable to locate module: Material-UI - Please check the path and try again