Question

我本地有一个data.js文件，我想在控制台中显示数据。我尝试使用提取未获取任何数据。这是我的 data.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
  },
  ]

我尝试使用下面的代码，但是没有用。

window.addEventListener("load", getTableData);

function getTableData() {
  fetch("json/data.js")
  .then(res => {
    console.log(res);
  });
}

然后我尝试使用axios。使用axios可以显示数据，但是可以显示带有变量名的完整数据。

window.addEventListener("load", getTableData);

function getTableData() {
  axios.get("json/data.js")
  .then(res => {
    console.log(res.data);
  });
}

下面的代码段是数据在控制台中显示。

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
  },
  ]

现在如何在没有axios的情况下获取数据？

这是data.js文件https://api-learning.netlify.com/json/data.js

这是我在浏览器中的演示，请检查控制台https://api-learning.netlify.com/

Answer 1

哇，等一下。如果要存储数据，则不希望使用常规的旧JavaScript文件。而是将您的数据放在JSON文件中。

data.json

[
  {
    "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
  }
]

请注意，密钥现在用双引号引起来。 那很重要。

有很多方法可以将JSON数据加载到JavaScript文件中，但这很大程度上取决于您正在使用哪种环境：

在Node中，它只是require模块。
在jQuery中，$.getJSON()函数调用。
除了这些之外，Fetch API和Axios都可以使用，但是我敢肯定还有其他选择。

花点时间熟悉JSON，并找出哪种本地加载方式最适合您。

如何使用JS从本地数据获取数据

1 个答案: