JavaScript Array remove begin the begin quotes and end quotes in an array

Question

I am trying to Build an array that displays value, color, highlight and label in an array.

The hard code array looks like this:

var data = [
    {
      value: 300,
      color:"#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
    },
    {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
    },
    {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
    }
];

Here is my code:

var pieData = [];
var label = [];
var beginData = "{";
var endData = "}";
var firstItem = "value:";
var secondItem = "color:";
var thirdItem = "highlight:";
var fourItem = "label:";
var spaceItem = ",";
var beginQuote = '"';
var endQuote =  '"';
var checkCounter = x.childElementCount -1;
var arrayColor = ["#F7464A", "#46BFBD", "#FDB45C", "#466abf", "#dc46f7", "#46bf8b", "#afbf46", "#bf8b46", "#bf5c46", "#b7bf46", "#46a9bf", "#bf4846" ];
var array = [     '#FF5A5E', '#5AD3D1', '#FFC870', '#466abf', '#dc46f7', '#46bf8b', '#afbf46', '#bf8b46', '#bf5c46', '#b7bf46', "#46a9bf", "#bf4846" ];
for( i = 0; i < x.childElementCount; i++) {
    name = x.childNodes[i].attributes.name.value;
    value = x.childNodes[i].attributes.value.value;
    array[i];
    arrayColor[i];
    if (checkCounter != i){
       pieData.push(beginData + firstItem + beginQuote + value + endQuote + spaceItem + secondItem + beginQuote + array[i] + endQuote + spaceItem + thirdItem + beginQuote + arrayColor[i]+ endQuote + spaceItem + fourItem + beginQuote + name + endQuote +  endData + spaceItem);
    }
     else{
        pieData.push(beginData + firstItem + beginQuote + value + endQuote + spaceItem + secondItem + beginQuote + array[i] + endQuote + spaceItem + thirdItem + beginQuote + arrayColor[i]+ endQuote + spaceItem + fourItem + beginQuote + name + endQuote +  endData);

                            }
  label.push(name);

my output is :

  0: "{value:"40",color:"#FF5A5E",highlight:"#F7464A",label:"Abnormal First Mam"},"
  1: "{value:"17",color:"#5AD3D1",highlight:"#46BFBD",label:"Abnormal Rescreen Mam"},"
  2: "{value:"57",color:"#FFC870",highlight:"#FDB45C",label:"Abnormal Total Mam"},"
  3: "{value:"5",color:"#466abf",highlight:"#466abf",label:"Abnormal CBE (Norm Mam)"},"
  4: "{value:"0",color:"#dc46f7",highlight:"#dc46f7",label:"Assessment Inc. Mam"},"
  5: "{value:"0",color:"#46bf8b",highlight:"#46bf8b",label:"Film Comp. req. Mam"}"

question from:https://stackoverflow.com/questions/65648485/javascript-array-remove-begin-the-begin-quotes-and-end-quotes-in-an-array

Answer 1

Your code is building strings, not objects. You should use the object literal syntax to build objects in your loop. Assuming that x.childNodes is array-like, you can use this code:

var arrayColor = ["#F7464A", "#46BFBD", "#FDB45C", "#466abf", "#dc46f7", "#46bf8b", "#afbf46", "#bf8b46", "#bf5c46", "#b7bf46", "#46a9bf", "#bf4846" ];
var array = [     '#FF5A5E', '#5AD3D1', '#FFC870', '#466abf', '#dc46f7', '#46bf8b', '#afbf46', '#bf8b46', '#bf5c46', '#b7bf46', "#46a9bf", "#bf4846" ];

var pieData = Array.from(x.childNodes, ({attributes:{value, name}}, i) => ({
    value: value.value,
    color: arrayColor[i % arrayColor.length],
    highlight: array[i % array.length],
    label: name.value,
}));

console.log(pieData);

The % is used to avoid that you go out of range of your color arrays -- in case there are more childNodes entries than you have in your arrays.

Array.from is ideal for mapping array-like objects (like childNodes) to an array with derived data, which is exactly what you are doing.