Are you able to parse JSON data then convert it into an array?

Question

I am using KOA for my backend calling json data from localhost:3000, then I need to place that data later into a slider but ordered into an array. All this within a custom WordPress theme. I am struggling to make this work as I am new to this. Can anyone help look at my code and see if I can convert into an array within my existing code so I can sort or order the data before placing it into the intended document? I am calling main.js where I am keeping the function that calls and formats the data. Here, I will include the main.js content as well as the json file. Thank you in advance.

insurer.json

{
  "insurer1": {
    "basic": {
      "title": "3rd Party basic",
      "price_from": "520"
    },
    "plus": {
      "title": "Ample 3rd Party",
      "price_from": "612"
    },
    "full": {
      "title": "High Risk",
      "price_from": "723"
    }
  },
  "insurer2": {
    "basic": {
      "title": "3rd Party basic",
      "price_from": "425"
    },
    "plus": {
      "title": "Ample 3rd Party",
      "price_from": "580"
    },
    "full": {
      "title": "High Risk",
      "price_from": "780"
    }
  },
  "insurer3": {
    "basic": {
      "title": "3rd Party basic",
      "price_from": "450"
    },
    "plus": {
      "title": "Ample 3rd Party",
      "price_from": "543"
    },
    "full": {
      "title": "High Risk",
      "price_from": "733"
    }
  }
}

main.js

const insuranceUrl = 'http://localhost:3000/insurances';

    const insuranceContainer = document.querySelector('.insurance');

    let Euro = '€/mes';
    let euro_symbol = '€';

    fetch(insuranceUrl) 
        .then(response => response.json())
        .then(data => {
        var sectionx=document.createElement("section");
        sectionx.classList.add("custom_section");
        var insurer1=sectionx.cloneNode(true);
        insurer1.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer1']['basic']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer1']['basic']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer1);
        var insurer1=sectionx.cloneNode(true);
        insurer1.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer1']['plus']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer1']['plus']['price_from']+' '+Euro+'</label>';
            insuranceContainer.appendChild(insurer1);
        var insurer1=sectionx.cloneNode(true);
        insurer1.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer3']['full']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer1']['full']['price_from']+' '+Euro+'</label>';
            insuranceContainer.appendChild(insurer1);
        var insurer2=sectionx.cloneNode(true);
        insurer2.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer2']['basic']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer2']['basic']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer2);
        var insurer2=sectionx.cloneNode(true);
        insurer2.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer2']['plus']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer2']['plus']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer2);
        var insurer2=sectionx.cloneNode(true);
        insurer2.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer2']['full']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer2']['full']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer2);       
        var insurer3=sectionx.cloneNode(true);
        insurer3.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer3']['basic']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer3']['basic']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer3);
        var insurer3=sectionx.cloneNode(true);
        insurer3.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer3']['plus']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer3']['plus']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer3);
        var insurer3=sectionx.cloneNode(true);
        insurer3.innerHTML='<div style="border:1px solid #c4c4c4; padding: 15px; min-width: 174px; text-align: left;">'
                        +'<label style="color:#27accd; font-weight:600; line-height: 20px;">'+data['insurer3']['full']['title']+'</label>'
                        +'<br />'
                        +'<label style="color:gray; line-height: 20px;">desde</label>'
                        +'<br />'
                        +'<label style="font-weight: bold; line-height: 20px;">'+data['insurer3']['full']['price_from']+' '+Euro+'</label>'
                        +'</div>';
            insuranceContainer.appendChild(insurer3);
        });

Answer 1

There is a native JS function that will return an Object's keys. You can use that to achieve this.

Let's say your results are stored in an Object called data

const data = {
  "insurer1": {
    "basic": {
      "title": "3rd Party basic",
      "price_from": "520"
    },
    "plus": {
      "title": "Ample 3rd Party",
      "price_from": "612"
    },
    "full": {
      "title": "High Risk",
      "price_from": "723"
    }
  },
  "insurer2": {
    "basic": {
      "title": "3rd Party basic",
      "price_from": "425"
    },
    "plus": {
      "title": "Ample 3rd Party",
      "price_from": "580"
    },
    "full": {
      "title": "High Risk",
      "price_from": "780"
    }
  },
  "insurer3": {
    "basic": {
      "title": "3rd Party basic",
      "price_from": "450"
    },
    "plus": {
      "title": "Ample 3rd Party",
      "price_from": "543"
    },
    "full": {
      "title": "High Risk",
      "price_from": "733"
    }
  }
}

From there, you could create a new var called keys and store the Object's keys.

let keys = Object.keys(data)

Now let's create an empty array to store the parsed results.

let resultsArr = [];

Now let's iterate through the keys in the object and push the values to the array.

keys.forEach(key => {resultsArr.push(data[key])})

The resultsArr should now contain your parsed data