Question

我正在使用KOA作为后端，从json调用localhost:3000数据，然后我需要稍后将这些数据放入滑块，但按顺序排列到数组中。所有这些都来自自定义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函数，它将返回对象的键。您可以使用它来实现这一目标。

比方说，您的结果存储在名为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"
    }
  }
}

从那里，您可以创建一个名为key的新变量，并存储对象的密钥。

let keys = Object.keys(data)

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

let resultsArr = [];

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

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

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

Answer 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>

您是否可以解析JSON数据，然后将其转换为数组？

2 个答案: