Every time I try to add a new element to my object, I end up with a bunch

Question

Every time I try to add a new element to my object, I end up with a bunch

I am currently working with an array object that contains similar values. I have been able to successfully filter out the duplicate values using a loop and then add the unique values to another object called objectProperties. Everything seems to be working fine, except for the fact that I am getting NULL values inside the category property.

   // Here is the data I'm extracting
var data = [ 
   {
      "label":"May 14",
      "value":56714.4,
      "proID":"ISB"
   },
   {...} - additional data entries ...
];

var propertiesObject = {    // This is my object
    type: 'mscolumn2d',
     renderAt: 'chart-container',
     width: '1000',
     height: '500',
     dataFormat: 'json', 
     dataSource: {
        chart: {
            caption: "Kilos per Date Comparison"
          
            }, 
    categories: [
            {
                category: [] 
            }
        ]
    }
};
 
    var propCount = Object.keys(data).length; 
    var checkSameLabel = data[0].label;   
    var firstIndex = {"label":data[0].label}; 
    propertiesObject.dataSource.categories[0].category[0] = firstIndex; 
    var currentProject = data[0].proID, counterCurrentProject = 0;
    for(let i = 0; i < propCount; i++) {
        if(checkSameLabel !== data[i].label) { 
            
            const value = data[i].label;
            var obj = { 
                "label": value  
            };
            propertiesObject.dataSource.categories[0].category[i] = value; 
        }  
        checkSameLabel = data[i].label; 
    }
    console.log(JSON.stringify(propertiesObject));
    document.getElementById("result").innerHTML = JSON.stringify(propertiesObject);

<div id="result"></div>

The expected output should look like this inside the "category" section:

{ "label": "May 14" },
{ "label": "May 15" },
{ "label": "May 16" },
{ "label": "May 17" }

However, I seem to be encountering some issues with NULL values due to my loop implementation or possibly some other mistake in the code.

javascript json

Answer 1

Answer №1

It's better to use push instead of assigning to array indices to avoid empty values:

// sample data extraction
var data = [{
    "label": "May 14",
    "value": 56714.4,
    "proID": "ISB"
  },
  // more data entries...
];

var propertiesObject = { 
  type: 'mscolumn2d',
  renderAt: 'chart-container',
  width: '1000',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Kilos per Date Comparison"
    },
    categories: [{
      category: []
    }]
  }
};

var propCount = Object.keys(data).length; 
var checkSameLabel = data[0].label;
var firstIndex = {
  "label": data[0].label
};
propertiesObject.dataSource.categories[0].category[0] = firstIndex; 
var currentProject = data[0].proID,
  counterCurrentProject = 0;
for (let i = 0; i < propCount; i++) {
  if (checkSameLabel !== data[i].label) { 

    const value = data[i].label;
    var obj = {
      "label": value
    };
    propertiesObject.dataSource.categories[0].category.push(obj);
  }
  checkSameLabel = data[i].label; 
}
console.log(propertiesObject);

<div id="result"></div>

You can also simplify the process using a Set to track added labels and iterating over the data with forEach:

// sample data extraction
var data = [{
    "label": "May 14",
    "value": 56714.4,
    "proID": "ISB"
  },
  // more data entries...
];

var propertiesObject = { 
  type: 'mscolumn2d',
  renderAt: 'chart-container',
  width: '1000',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Kilos per Date Comparison"

    },
    categories: [{
      category: []
    }]
  }
};

const labelsAdded = new Set();
data.forEach(({ label }) => {
  if (labelsAdded.has(label)) {
    return;
  }
  labelsAdded.add(label);
  propertiesObject.dataSource.categories[0].category.push({ label });
});
console.log(propertiesObject);

Alternatively, you can make use of a Set for label strings and then utilize .map:

// sample data extraction
var data = [{
    "label": "May 14",
    "value": 56714.4,
    "proID": "ISB"
  },
  // more data entries...
];

var propertiesObject = { 
  type: 'mscolumn2d',
  renderAt: 'chart-container',
  width: '1000',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Kilos per Date Comparison"

    },
    categories: [{
      category: [...new Set(data.map(({ label }) => label))].map(label => ({ label }))
    }]
  }
};
console.log(propertiesObject);

Answer 2

It's better to use push instead of assigning to array indices to avoid empty values:

// sample data extraction
var data = [{
    "label": "May 14",
    "value": 56714.4,
    "proID": "ISB"
  },
  // more data entries...
];

var propertiesObject = { 
  type: 'mscolumn2d',
  renderAt: 'chart-container',
  width: '1000',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Kilos per Date Comparison"
    },
    categories: [{
      category: []
    }]
  }
};

var propCount = Object.keys(data).length; 
var checkSameLabel = data[0].label;
var firstIndex = {
  "label": data[0].label
};
propertiesObject.dataSource.categories[0].category[0] = firstIndex; 
var currentProject = data[0].proID,
  counterCurrentProject = 0;
for (let i = 0; i < propCount; i++) {
  if (checkSameLabel !== data[i].label) { 

    const value = data[i].label;
    var obj = {
      "label": value
    };
    propertiesObject.dataSource.categories[0].category.push(obj);
  }
  checkSameLabel = data[i].label; 
}
console.log(propertiesObject);

<div id="result"></div>

You can also simplify the process using a Set to track added labels and iterating over the data with forEach:

// sample data extraction
var data = [{
    "label": "May 14",
    "value": 56714.4,
    "proID": "ISB"
  },
  // more data entries...
];

var propertiesObject = { 
  type: 'mscolumn2d',
  renderAt: 'chart-container',
  width: '1000',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Kilos per Date Comparison"

    },
    categories: [{
      category: []
    }]
  }
};

const labelsAdded = new Set();
data.forEach(({ label }) => {
  if (labelsAdded.has(label)) {
    return;
  }
  labelsAdded.add(label);
  propertiesObject.dataSource.categories[0].category.push({ label });
});
console.log(propertiesObject);

Alternatively, you can make use of a Set for label strings and then utilize .map:

// sample data extraction
var data = [{
    "label": "May 14",
    "value": 56714.4,
    "proID": "ISB"
  },
  // more data entries...
];

var propertiesObject = { 
  type: 'mscolumn2d',
  renderAt: 'chart-container',
  width: '1000',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Kilos per Date Comparison"

    },
    categories: [{
      category: [...new Set(data.map(({ label }) => label))].map(label => ({ label }))
    }]
  }
};
console.log(propertiesObject);

Answer 3

Answer №2

There seems to be a couple of errors

You created the variable 'obj', but you are not using it


var obj = { 
    "label": value  
};

// Not recommended
propertiesObject.dataSource.categories[0].category[i] = value;

// It should be this, but still incorrect, see point (2)
propertiesObject.dataSource.categories[0].category[i] = obj;

You are adding elements to an array by setting it with an index, you should use array push instead

// Not recommended
propertiesObject.dataSource.categories[0].category[i] = obj;

// Should be
propertiesObject.dataSource.categories[0].category.push(obj);

// Data that I am extracting
var data = [ 
   {
      "label":"May 14",
      "value":56714.4,
      "proID":"ISB"
   },
   // Other data entries go here...
];

var propertiesObject = {    // My object
     // Object details go here...
 };
 
 // Code continues below...

<div id="result"></div>

Answer 4

There seems to be a couple of errors

You created the variable 'obj', but you are not using it


var obj = { 
    "label": value  
};

// Not recommended
propertiesObject.dataSource.categories[0].category[i] = value;

// It should be this, but still incorrect, see point (2)
propertiesObject.dataSource.categories[0].category[i] = obj;

You are adding elements to an array by setting it with an index, you should use array push instead

// Not recommended
propertiesObject.dataSource.categories[0].category[i] = obj;

// Should be
propertiesObject.dataSource.categories[0].category.push(obj);

// Data that I am extracting
var data = [ 
   {
      "label":"May 14",
      "value":56714.4,
      "proID":"ISB"
   },
   // Other data entries go here...
];

var propertiesObject = {    // My object
     // Object details go here...
 };
 
 // Code continues below...

<div id="result"></div>

Every time I try to add a new element to my object, I end up with a bunch

Answer №1

Answer №2

Similar questions

Struggling to find the right strategy for obtaining real-time data while implementing customized filters

What could be the reason for the absence of this retrieved data in my HTML code?

Adjust the size of various texts to fit the width of the container

Error: Unable to locate Vue and its definition

Swapping a value within an array and moving it to a new position

Choose the designated radio button option automatically depending on the value received from the server

Obtain the response body in Nest JS middleware

What are the steps to resolve a Fetch request issue with a Node.js server?

Guide on making a PDF input field function like a regular input field with PDF.js

What steps can be taken to avoid or halt focusing on the following input text element?

The app's functionality is disrupted by a malfunctioning Appframework jQuery

Struggling with modifying background color in Vue.js?

Error in NextJS: The module 'caniuse-lite/data/features/css-unicode-bidi' could not be located

Trigger the oninput event using jQuery

Performing Ajax requests according to the selected checkbox data

Searching for an element with a changing name using jQuery - Struggling with quotes

JSON retrieving a singular record exclusively

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have a JavaScript code stored as a string that I need to transform into plain JavaScript

What steps do I need to take to implement a unique second factor of authentication using Firebase?