从JSON数组实例化TypeScript类

时间:2016-11-20 20:18:43

标签: angular typescript

这个问题可能不是100%原创,但到目前为止我发现的问题/答案似乎忽略了房间里的某个大象。

我有一种情况,我会简化为例。假设我有以下JSON响应:

[
  {
    "place": {
      "name": "The Cottage",
      "rating": 4
    }
  },
  {
    "place": {
      "name": "El Burrito Loco",
      "rating": 5
    }
  }
]

然后假设我想要一个名为Place的Typescript类。如果我将每个元素实例化为Place,我就会遇到这种愚蠢的情况:

<!-- this is an Angular template -->

<ul>
  <li *ngFor="let place of places">{{ place.place.name }}</li>
</ul>

我更喜欢的是{{ place.name }}而不是{{ place.place.name }}

所以我的问题是:如何转换JSON响应以匹配我的数据模型

我已经看过像this one这样的问题/答案。

令我感到困惑的是a)我认为这种转变欲望是一种非常普遍的转变,而b)到目前为止我发现的所有答案似乎都涉及大量的hacky样板(没有冒犯)。

那么什么是交易,每个人只是将所有这些样板复制并粘贴到他们的应用程序中以满足必须是非常普遍的需求,而TypeScript(或Angular)开发人员只是没有来用语言或框架来满足这种需求的方法?这似乎不太可能。这很令人困惑。

非常感谢任何见解。

3 个答案:

答案 0 :(得分:1)

我可以想到API调用observable上的简单map函数,它将以class Session { public function read($str){ return isset($_SESSION[$str]) ? $this->deleteAndRet($str) : null; } protected function deleteAndRet($str){ $ret = $_SESSION[$str]; unset($_SESSION[$str]); return $ret; } } 对象模型格式创建所需的对象结构。

Place

答案 1 :(得分:0)

JSON.parse实际上支持一个可选的reviver参数,允许您在反序列化过程中控制任何给定属性的创建。您应该可以使用它来创建类的实例。

答案 2 :(得分:0)

这就是我最终做的事情。感谢Pankaj Parkar提供的一些线索让我来到这里。

  getList(): Observable<Place[]> {
    return this.http.get(this.placesUrl)
               .map(response => response.json().data)
               .map(data => data.map((item) => {
                 return <Place>({
                   name: item.place.name,
                   place: item.place
                 });
               }));
  }