您是否能够解析 JSON 数据然后将其转换为数组？

Question

我正在使用 KOA 作为后端从 localhost:3000 调用 json 数据，然后我需要稍后将该数据放入滑块但排序到数组中。所有这些都在自定义 WordPress 主题中。由于我是新手，所以我正在努力完成这项工作。任何人都可以帮助查看我的代码，看看我是否可以在现有代码中转换为数组，以便在将数据放入预期文档之前对数据进行排序或排序？我正在调用 main.js，我保留调用和格式化数据的函数。在这里，我将包含 main.js 内容以及 json 文件。提前谢谢你。

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 = '&euro;/mes';
    let euro_symbol = '&euro;';

    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

有一个原生 JS 函数可以 return 对象的键。您可以使用它来实现这一目标。

假设您的结果存储在一个名为 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"
    }
  }
}

从那里，您可以创建一个名为 keys 的新 var 并存储对象的键。

let keys = Object.keys(data)

现在让我们创建一个空数组来存储解析的结果。

let resultsArr = [];

现在让我们遍历对象中的键并将值推送到数组。

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

resultsArr 现在应该包含您解析的数据

Answer 2

你可以使用Object.values()，其中returns一个数组

假设密钥不重要并且您的目标是现代浏览器

const arr = Object.values(data)

arr.forEach((item,i)=> console.log(`Basic from price #${i+1} = ${item.basic.price_from}`))

<script>
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"
    }
  }
}
</script>

您是否能够解析 JSON 数据然后将其转换为数组？

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

javascript

wordpress

json

koa