Meraki
Reputation: 125
I keep getting null values after adding new element to my object
I have an array object with some similar values. I'm excluding their duplicate values using a loop, and then I add the values to my other object(objectProperties) it's working fine however I get a NULL values inside category
// data which im extracting
var data = [
{
"label":"May 14",
"value":56714.4,
"proID":"ISB"
},
{
"label":"May 14",
"value":15902.5,
"proID":"LI8"
},
{
"label":"May 14",
"value":419.6,
"proID":"TR2"
},
{
"label":"May 15",
"value":2754.8,
"proID":"DAC"
},
{
"label":"May 15",
"value":50845.7,
"proID":"ISB"
},
{
"label":"May 15",
"value":19760.3,
"proID":"LI8"
},
{
"label":"May 15",
"value":1704.1,
"proID":"TR2"
},
{
"label":"May 16",
"value":2145.6,
"proID":"DAC"
},
{
"label":"May 16",
"value":55666.4,
"proID":"ISB"
},
{
"label":"May 16",
"value":15044.4,
"proID":"LI8"
},
{
"label":"May 16",
"value":2413.5,
"proID":"TR2"
},
{
"label":"May 17",
"value":6564.4,
"proID":"DAC"
},
{
"label":"May 17",
"value":71379,
"proID":"ISB"
},
{
"label":"May 17",
"value":21774.2,
"proID":"LI8"
},
{
"label":"May 17",
"value":2191.4,
"proID":"TR2"
},
{
"label":"May 18",
"value":63338.9,
"proID":"ISB"
},
{
"label":"May 18",
"value":24451,
"proID":"LI8"
},
{
"label":"May 18",
"value":2616.5,
"proID":"TR2"
}
];
var propertiesObject = { // 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; // getting object length
var checkSameLabel = data[0].label; // for reference reference inside the loop
var firstIndex = {"label":data[0].label}; // im taking first index of object and add manually
propertiesObject.dataSource.categories[0].category[0] = firstIndex; // adding the first index to my object
var currentProject = data[0].proID, counterCurrentProject = 0;
for(let i = 0; i < propCount; i++) {
if(checkSameLabel !== data[i].label) { // check if current value of label is not equal then add new data to my object
const value = data[i].label;
var obj = {
"label": value
};
propertiesObject.dataSource.categories[0].category[i] = value; // adding new data
}
checkSameLabel = data[i].label; // for the next check
}
console.log(JSON.stringify(propertiesObject));
document.getElementById("result").innerHTML = JSON.stringify(propertiesObject);<div id="result"></div>I'm expecting the output to be like this inside "category"
{ "label": "May 14" },
{ "label": "May 15" },
{ "label": "May 16" },
{ "label": "May 17" }
I don't know if it's because of my loop or im doing something wrong.
Upvotes: 0
Views: 335
Answers (2)
jimmy5312
Reputation: 429
There are a few errors
- You created variable 'obj', but not using it
var obj = {
"label": value
};
// No good
propertiesObject.dataSource.categories[0].category[i] = value;
// Should be this, but still not correct, see point (2)
propertiesObject.dataSource.categories[0].category[i] = obj;
- You are adding elements to array by setting it with index, you should use array push instead
// No good
propertiesObject.dataSource.categories[0].category[i] = obj;
// Should be
propertiesObject.dataSource.categories[0].category.push(obj);
// data which im extracting
var data = [
{
"label":"May 14",
"value":56714.4,
"proID":"ISB"
},
{
"label":"May 14",
"value":15902.5,
"proID":"LI8"
},
{
"label":"May 14",
"value":419.6,
"proID":"TR2"
},
{
"label":"May 15",
"value":2754.8,
"proID":"DAC"
},
{
"label":"May 15",
"value":50845.7,
"proID":"ISB"
},
{
"label":"May 15",
"value":19760.3,
"proID":"LI8"
},
{
"label":"May 15",
"value":1704.1,
"proID":"TR2"
},
{
"label":"May 16",
"value":2145.6,
"proID":"DAC"
},
{
"label":"May 16",
"value":55666.4,
"proID":"ISB"
},
{
"label":"May 16",
"value":15044.4,
"proID":"LI8"
},
{
"label":"May 16",
"value":2413.5,
"proID":"TR2"
},
{
"label":"May 17",
"value":6564.4,
"proID":"DAC"
},
{
"label":"May 17",
"value":71379,
"proID":"ISB"
},
{
"label":"May 17",
"value":21774.2,
"proID":"LI8"
},
{
"label":"May 17",
"value":2191.4,
"proID":"TR2"
},
{
"label":"May 18",
"value":63338.9,
"proID":"ISB"
},
{
"label":"May 18",
"value":24451,
"proID":"LI8"
},
{
"label":"May 18",
"value":2616.5,
"proID":"TR2"
}
];
var propertiesObject = { // 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; // getting object length
console.log(propCount)
var checkSameLabel = data[0].label; // for reference reference inside the loop
var firstIndex = {"label":data[0].label}; // im taking first index of object and add manually
propertiesObject.dataSource.categories[0].category[0] = firstIndex; // adding the first index to my object
var currentProject = data[0].proID, counterCurrentProject = 0;
for(let i = 0; i < propCount; i++) {
if(checkSameLabel != data[i].label) { // check if current value of label is not equal then add new data to my object
const value = data[i].label;
var obj = {
"label": value
};
// Use Array.push() to add new data
propertiesObject.dataSource.categories[0].category.push(obj);
}
checkSameLabel = data[i].label; // for the next check
}
console.log(JSON.stringify(propertiesObject));
document.getElementById("result").innerHTML = JSON.stringify(propertiesObject);<div id="result"></div>Upvotes: 0
CertainPerformance
Reputation: 370929
Instead of assigning to indicies of the array, use push instead, else you'll have empty values:
// data which im extracting
var data = [{
"label": "May 14",
"value": 56714.4,
"proID": "ISB"
},
{
"label": "May 14",
"value": 15902.5,
"proID": "LI8"
},
{
"label": "May 14",
"value": 419.6,
"proID": "TR2"
},
{
"label": "May 15",
"value": 2754.8,
"proID": "DAC"
},
{
"label": "May 15",
"value": 50845.7,
"proID": "ISB"
},
{
"label": "May 15",
"value": 19760.3,
"proID": "LI8"
},
{
"label": "May 15",
"value": 1704.1,
"proID": "TR2"
},
{
"label": "May 16",
"value": 2145.6,
"proID": "DAC"
},
{
"label": "May 16",
"value": 55666.4,
"proID": "ISB"
},
{
"label": "May 16",
"value": 15044.4,
"proID": "LI8"
},
{
"label": "May 16",
"value": 2413.5,
"proID": "TR2"
},
{
"label": "May 17",
"value": 6564.4,
"proID": "DAC"
},
{
"label": "May 17",
"value": 71379,
"proID": "ISB"
},
{
"label": "May 17",
"value": 21774.2,
"proID": "LI8"
},
{
"label": "May 17",
"value": 2191.4,
"proID": "TR2"
},
{
"label": "May 18",
"value": 63338.9,
"proID": "ISB"
},
{
"label": "May 18",
"value": 24451,
"proID": "LI8"
},
{
"label": "May 18",
"value": 2616.5,
"proID": "TR2"
}
];
var propertiesObject = { // 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; // getting object length
var checkSameLabel = data[0].label; // for reference reference inside the loop
var firstIndex = {
"label": data[0].label
}; // im taking first index of object and add manually
propertiesObject.dataSource.categories[0].category[0] = firstIndex; // adding the first index to my object
var currentProject = data[0].proID,
counterCurrentProject = 0;
for (let i = 0; i < propCount; i++) {
if (checkSameLabel !== data[i].label) { // check if current value of label is not equal then add new data to my object
const value = data[i].label;
var obj = {
"label": value
};
propertiesObject.dataSource.categories[0].category.push(obj);
}
checkSameLabel = data[i].label; // for the next check
}
console.log(propertiesObject);<div id="result"></div>You could also simplify things by using a Set to keep track of labels added so far and forEaching over the data:
// data which im extracting
var data = [{
"label": "May 14",
"value": 56714.4,
"proID": "ISB"
},
{
"label": "May 14",
"value": 15902.5,
"proID": "LI8"
},
{
"label": "May 14",
"value": 419.6,
"proID": "TR2"
},
{
"label": "May 15",
"value": 2754.8,
"proID": "DAC"
},
{
"label": "May 15",
"value": 50845.7,
"proID": "ISB"
},
{
"label": "May 15",
"value": 19760.3,
"proID": "LI8"
},
{
"label": "May 15",
"value": 1704.1,
"proID": "TR2"
},
{
"label": "May 16",
"value": 2145.6,
"proID": "DAC"
},
{
"label": "May 16",
"value": 55666.4,
"proID": "ISB"
},
{
"label": "May 16",
"value": 15044.4,
"proID": "LI8"
},
{
"label": "May 16",
"value": 2413.5,
"proID": "TR2"
},
{
"label": "May 17",
"value": 6564.4,
"proID": "DAC"
},
{
"label": "May 17",
"value": 71379,
"proID": "ISB"
},
{
"label": "May 17",
"value": 21774.2,
"proID": "LI8"
},
{
"label": "May 17",
"value": 2191.4,
"proID": "TR2"
},
{
"label": "May 18",
"value": 63338.9,
"proID": "ISB"
},
{
"label": "May 18",
"value": 24451,
"proID": "LI8"
},
{
"label": "May 18",
"value": 2616.5,
"proID": "TR2"
}
];
var propertiesObject = { // my object
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);Or, by creating a Set of the label strings, and then using .map:
// data which im extracting
var data = [{
"label": "May 14",
"value": 56714.4,
"proID": "ISB"
},
{
"label": "May 14",
"value": 15902.5,
"proID": "LI8"
},
{
"label": "May 14",
"value": 419.6,
"proID": "TR2"
},
{
"label": "May 15",
"value": 2754.8,
"proID": "DAC"
},
{
"label": "May 15",
"value": 50845.7,
"proID": "ISB"
},
{
"label": "May 15",
"value": 19760.3,
"proID": "LI8"
},
{
"label": "May 15",
"value": 1704.1,
"proID": "TR2"
},
{
"label": "May 16",
"value": 2145.6,
"proID": "DAC"
},
{
"label": "May 16",
"value": 55666.4,
"proID": "ISB"
},
{
"label": "May 16",
"value": 15044.4,
"proID": "LI8"
},
{
"label": "May 16",
"value": 2413.5,
"proID": "TR2"
},
{
"label": "May 17",
"value": 6564.4,
"proID": "DAC"
},
{
"label": "May 17",
"value": 71379,
"proID": "ISB"
},
{
"label": "May 17",
"value": 21774.2,
"proID": "LI8"
},
{
"label": "May 17",
"value": 2191.4,
"proID": "TR2"
},
{
"label": "May 18",
"value": 63338.9,
"proID": "ISB"
},
{
"label": "May 18",
"value": 24451,
"proID": "LI8"
},
{
"label": "May 18",
"value": 2616.5,
"proID": "TR2"
}
];
var propertiesObject = { // my object
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);Upvotes: 1
Related Questions
- Adding elements to object
- When looping over an array of objects and adding data to a variable, it always adds an null along with the data
- Keys are not being added to my json object while looping through it
- Object giving null values even after giving values
- Not Able To Add Values inside a JSON object dynamicaally
- How to add elements to JSON Object
- json object key is getting added even if array has the key
- json null property after creating new property
- How to add element to JSON object with Javascript
- Adding to an object in JavaScript