时间戳

首页 > 解决方案 > 尝试从 JSON 文件中读取和使用数据

angular - 尝试从 JSON 文件中读取和使用数据

问题描述

我正在尝试将 JSON 文件导入到我的 Angular 打字稿页面文件中，如下所示：

{
    "latitude": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 
    "longitude": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    "value":[53, 95, 3, 10, 239, 102, 604, 58, 82, 105, 220, 68]
}

我是新手，所以从在线教程中，我使用 HttpClient 浏览文件并将数据移动到数组中，以便在另一个函数中使用。

latitudes = [];
  
constructor(private http: HttpClient) 
  { 
    // grab the data from the json file and creates a JSON object
    this.http.get('../../assets/data/test2.json').toPromise().then(data => 
    {
      for( let key in data)
      {
        // checks if data has a key
        if (data.hasOwnProperty(key))
        {
          // check if key = latitude, if true then push current data to latitude list
          if(key == "latitude")
          {
            this.latitudes.push(key);
            this.latitudes.push(data[key]);
          }
        }
      }


      console.log(this.latitudes);
    });

    console.log(this.latitudes);
  }

虽然它确实获取了数据，但在尝试访问纬度列表时，http get 请求中的 console.log 可以自由使用数据。但是，当在外面我无法访问数据时，尽管它仍然显示在 console.log 上，并且当尝试从外部访问数据时，它说它是未定义的。我希望以后能够使用这些数据进行可视化。

控制台输出

图中，上面是从外面输出的，下面是从里面输出的。阅读周围我听说这是因为同步问题还是什么？既然控制台输出是这样的，是不是因为外部输出在内部输出之前运行？

标签： angulartypescriptionic-framework

解决方案

您可以通过一个简单的方法来实现这一点：

this.http.get('../../assets/data/test2.json').toPromise().then(data => 
    {
      Object.keys(data)?.forEach(key => {
        if(key === "latitude") {
          this.latitudes = data[key];
        }
      });

      console.log(this.latitudes);
    });

推荐阅读