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

【问题标题】：Are you able to parse JSON data then convert it into an array?您是否能够解析 JSON 数据然后将其转换为数组？
【发布时间】：2019-07-12 18:24:54
【问题描述】：

我在后端使用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);
        });

【问题讨论】：

您希望阵列是什么样的？您是否希望 JSON 文件中的每个保险公司对象成为数组中自己的元素？保险公司的每个孩子？
insurer1 基本款，最低价格，insurer2 基本款，中等价格，insurer3 基本款，最高价格的insurer1 plus，最低价格，insurer2 plus，中等价格，insurer3 plus，最高价格insurer1 完整，最低价格，insurer3 完整，中价，insurer3，全价，最高价，但我不能操作原始文件中的 json 数据，因为公司会不时更改它。
也就是说，先按基本分组，再按全分组。由于价格已经在 JSON 中排序，我不需要对它们进行排序。

标签： javascript json wordpress koa

【解决方案1】：

有一个原生的 JS 函数会返回一个对象的键。您可以使用它来实现这一点。

假设您的结果存储在一个名为 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 现在应该包含您的解析数据

【讨论】：

问题：我必须将 const data =... 添加到 json 文件中还是在 main.js 文件中执行此操作？
你根本不应该使用const data =（这里）。在.then(data => { 之后，您将拥有所需的对象。传递给.then 的函数中的变量data 是您应该使用的
您可以省略该步骤，只要您的 main.js 文件中的数据可以访问，就像您在该数据引用中所做的那样。

【解决方案2】：

你可以使用Object.values()，它返回一个数组

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

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>

【讨论】：