Angular ionic2如何显示Json数据？

我正在尝试获取数据并在ionic 2中显示它，但我有一个错误，我不明白。这是我的json数据的url。我只想以列表格式显示一些数据。console.log（数据）；在控制台中显示数据，但在尝试整理数据时出错。使用{{item.data.first_name}{{{item.data.last_name}

这是我的错误

SyntaxError: Unexpected token ' in JSON at position 1
    at JSON.parse (<anonymous>)
    at Response.Body.json (http://localhost:8100/build/main.js:59262:25)
    at MapSubscriber.project (http://localhost:8100/build/main.js:46400:76)
    at MapSubscriber._next (http://localhost:8100/build/main.js:45993:35)
    at MapSubscriber.Subscriber.next (http://localhost:8100/build/main.js:15510:18)
    at XMLHttpRequest.onLoad (http://localhost:8100/build/main.js:59691:38)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4616:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9576)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:4831)

这是一些json数据

{
success: true,
-data: (3)[
-{
first_name: "Kayla",
last_name: "Leftwich",
email: "kleftwich0@cnbc.com",
gender: "Female",
image: http://dummyimage.com/202x140.png/cc0000/ffffff,
country: "United States",
state: "North Carolina",
phone_number: "1-(704)808-0271",
professional: "Community Outreach Specialist"
},
-{
first_name: "Jeniffer",
last_name: "Concklin",
email: "jconcklin1@seesaa.net",
gender: "Female",
image: http://dummyimage.com/104x134.png/5fa2dd/ffffff,
country: "United States",
state: "Ohio",
phone_number: "1-(937)878-1803",
professional: "Nuclear Power Engineer"
},
-{
first_name: "Gonzalo",
last_name: "Byk",
email: "gbyk2@twitter.com",
gender: "Male",
image: http://dummyimage.com/112x100.png/dddddd/000000,
country: "United States",
state: "North Carolina",
phone_number: "1-(336)376-6805",
professional: "Account Coordinator"
}
]
}

---

我正在使用本教程，但它仅适用于他们的api，我正在尝试使用我的

问题是，您试图在迭代中显示类似于

项的内容。first_name

（我假设您有一个迭代）。在对JSON进行更改后，现在的数据中没有类似于

first\u name

的属性。我也会对你的代码做一些修改。我们通常将http请求保存在服务中，该服务返回一个可观察的（在您的情况下），然后我们在组件中订阅该服务。因此，在您的

RedditService

中，使用以下功能：

getData(){
  return this.http.get('https://thethinker.com.ng/techwand/usr.php')
     .map(res => res.json().data)
}

并在您的组件中订阅。同时，不要让构造器看到所有不必要的东西。我们有能力处理构造函数中不需要的事情

ngOnInit() {
  this.redditService.getData()
    .subscribe(data => {
      this.items = data;
    });
}

然后，您可以在模板中迭代数据，如：

<ion-item *ngFor="let item of items">
  {{item.data}} {{item.two}}
</ion-item>

{{item.data}{{item.two}

这将打印名字和姓氏。你似乎有一个奇怪的命名惯例，所以我建议你研究一下：）

---

这里有一个

可能是格式不正确的json。.打印响应

.map（res=>{console.log（res）；return res.json（）}）

并在一些在线格式化程序中测试您的json。仍然不工作它是否记录json？是的，还有其他方式它格式不正确

图像：http://dummyimage.com/202x140.png/cc0000/ffffff,

您的图像数据需要双引号

<ion-item *ngFor="let item of items">
  {{item.data}} {{item.two}}
</ion-item>