Question

如何将对象转换为JSON并在html页面上输出？

public User:UserInfo=
  {
    firstName: "O",
    lastName: "K",
    email: "ol@op.com",
    country: "uk",
    avatarUrl: null,
    receiveNotifications: true
  }

Answer 1

我希望你在我的问题中给了我们更多的细节，但我会尽我所能，所以请耐心等待！我们假设您有一个看起来像这样的对象

a.component.ts

public obj = {
     name: "Oleg",
     question: "convert object to json",
     description: "Some cool question about angular and JSON"
}

要显示此数据，您的视图将如下所示

a.component.html

<h1> {{ obj.name }} </h1>
<h2> {{ obj.question }} </h2>
<p>  {{ obj.description }} </p>

请注意我的班级成员如何设置为公开，这对于您创建应用程序的AoT版本非常重要。

如果您无法理解，我的简化示例。看看这个example

Answer 2

您可以尝试以下操作：

let jsonStr=JSON.stringify(user).

Answer 3

我可以看到你来自jQuery世界，但是使用angular.js事情变得更加简单，请查看这个jsFiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

使用angular.js，您可以更加简单地附加事件：

  <input type="button" ng-click="showJson()" value="Object To JSON" />
    and then in your controller:
         $scope.showJson = function() {
        $scope.json = angular.toJson($scope.user);
    }

事实上，使用angular.js过滤器可以更轻松地完成此操作，请查看此jsFiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/2/，其中包含：

{{user | json}}

将对象转换为json

3 个答案: