Javascript 如何只编写纯JS（无jquery或任何东西）代码从外部'；读取JSON数据；。js'；文件

注意：只使用纯JS，没有插件，请提供一个示例

示例数据js文件内容-

var TABLE_DATA = [
  {
    "id": "5",
    "name": "cony #5",
    "thumbnailUrl": "image/5.gif",
    "price": 170
  },
  {
    "id": "1",
    "name": "cony #1",
    "thumbnailUrl": "image/1.gif",
    "price": 170
  },
  {
    "id": "2",
    "name": "cony #2",
    "thumbnailUrl": "image/2.gif",
    "price": 270
  },
  {
    "id": "8",
    "name": "cony #8",
    "thumbnailUrl": "image/8.gif",
    "price": 70
  },
  {
    "id": "10",
    "name": "<img onerror='window.document.body.innerHTML = \"<h1>XSS</h1>\";' src=''> ",
    "thumbnailUrl": "image/10.gif",
    "price": 170
  },
  {
    "id": "4",
    "name": "cony #4",
    "thumbnailUrl": "image/4.gif",
    "price": 150
  },
  {
    "id": "3",
    "name": "cony #3",
    "thumbnailUrl": "image/3.gif",
    "price": 130
  },
  {
    "id": "6",
    "name": "cony #6",
    "thumbnailUrl": "image/6.gif",
    "price": 160
  },
  {
    "id": "9",
    "name": "cony #9",
    "thumbnailUrl": "image/9.gif",
    "price": 170
  },
  {
    "id": "7",
    "name": "cony #7",
    "thumbnailUrl": "image/7.gif",
    "price": 170
  }
]

var表_数据=[
{
“id”：“5”，
“姓名”：“cony#5”，
“thumbnailUrl”：“image/5.gif”，
“价格”：170
},
{
“id”：“1”，
“姓名”：“cony#1”，
“thumbnailUrl”：“image/1.gif”，
“价格”：170
},
{
“id”：“2”，
“姓名”：“cony#2”，
“thumbnailUrl”：“image/2.gif”，
“价格”：270
},
{
“id”：“8”，
“姓名”：“cony#8”，
“thumbnailUrl”：“image/8.gif”，
“价格”：70
},
{
“id”：“10”，
“名称”：“，
“thumbnailUrl”：“image/10.gif”，
“价格”：170
},
{
“id”：“4”，
“姓名”：“cony#4”，
“thumbnailUrl”：“image/4.gif”，
“价格”：150
},
{
“id”：“3”，
“姓名”：“cony#3”，
“thumbnailUrl”：“image/3.gif”，
“价格”：130
},
{
“id”：“6”，
“姓名”：“cony#6”，
“thumbnailUrl”：“image/6.gif”，
“价格”：160
},
{
“id”：“9”，
“姓名”：“cony#9”，
“thumbnailUrl”：“image/9.gif”，
“价格”：170
},
{
“id”：“7”，
“姓名”：“cony#7”，
“thumbnailUrl”：“image/7.gif”，
“价格”：170
}
]

js内置了

JSON.parse（您的_JSON_文件）

解析JSON的方法

在您的示例中，它是一个json数组

所以您可以使用for循环遍历每个单独的JSON

        const length = TABLE_DATA.length;
        for(var i =0 ;i< length;i++) {
            var jsObject = JSON.stringify(TABLE_DATA[i]);
            console.log(jsObject);
    //To read id 
    console.log(jsObject.id)
    //To read name
    console.log(jsObject.name)
    //and so on   
}

const length=TABLE_DATA.length；
对于（变量i=0；i

请记住：

JSON.parse

将JSON文本字符串转换为JavaScript 反对

JSON.stringify

将JavaScript对象转换为JSON文本并存储 字符串中的JSON文本

从文件中加载数据的步骤

---

愿它能帮助你

要加载外部文件，必须在脚本能够访问的地方（例如web服务器）提供该文件。如果将数据放置为纯JSON（无

var TABLE_data

），则可以使用

XMLHttpRequest

加载此数据，如下所示：

const xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
    if (this.readyState ==4  && this.status==200) { 
        data = JSON.parse(this.responseText)
        // do stuff with your data
    }
}
xhttp.open(URL_TO_THE_JSON)
xhttp.send()

---

请告诉我们您尝试了什么，但为了格式化它，您在``之间编写了代码。带有JSON数据的文件是一个差异文件，不在同一个js文件中。我想知道如何在另一个js文件中访问（差异文件）JSON数据。您可以点击这里：如果有帮助，请勾选答案。@'Omkar Nilake'它可能会工作，但无法测试，因为“CORS策略”问题正在阻止它。您是否在浏览器环境中工作（使用html）？在这种情况下，您可以只使用

脚本

标记来加载外部文件。