Question

这是html文档中的一小段脚本，是否与ionic 4文档中的脚本插入相同？

<script>
  let xmlhttp = new XMLHttpRequest(),
    url = "jsonPractice.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var menuItems = JSON.parse(xmlhttp.responseText);
      buildItem(menuItems);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function buildItem(items) {
    var output = "",
      selectedID = localStorage.getItem("selected");

    items.forEach(function(item) {
      if (selectedID == item.id) {
        output = "<li class='item'>" +
          "<h3>" + item.firstName + " " + item.lastName + "</h3>" +
          "<img class='pic' src=assets/images/" + item.photo + " />" +
          "<p>age: " + item.age + "</p>" +
          "<p>status: " + item.status + "</p>" +
          "<p>how We Met: " + item.howWeMet + "</p>" +
          "</li>";
      }
    });

    document.getElementById("item").innerHTML = output;
  }
</script>

我知道离子性有所不同，并且仍在学习中。

Answer 1

将JSON文件复制到资产文件夹中。将HTTP Client导入组件内部或使用导入的HTTP Client实施服务。现在，您可以使用Get方法读取JSON文件。示例：

    constructor(private _http: HttpClient) {}
    loadJson() {
      this._http.get('./assets/jsonfilename.json').subscribe(
       data => console.log(data)
      )
    }

Answer 2

如果您将Ionic 4与打字稿3+一起使用，则可以通过以下方式进行操作：

为应用程序的模块添加对json导入的支持：为此，请在应用程序的根目录中找到tsconfig.json文件，并确保设置了以下属性：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true  
  }
}

请确保将json移至资产文件夹，因为它是静态资产。然后可以在ts文件中执行以下操作：

从'./assets/jsonfilename.json'导入myJsonData;

然后您可以使用将成为json的myJsonData。

如何从Ionic4中的本地文件导入JSON

2 个答案: