如何在IONIC混合应用程序中解析json数据有阵列

问题描述:

我是混合离子应用程序开发的初学者。我想在我的项目中实现RESTful Web服务。 我的JSON数据是:如何在IONIC混合应用程序中解析json数据有阵列

{ 
    "records": [ 
     { 
      "Name": "Alfreds Futterkiste", 
      "City": "Berlin", 
      "Country": "Germany" 
     }, 
     { 
      "Name": "Ana Trujillo Emparedados y helados", 
      "City": "México D.F.", 
      "Country": "Mexico" 
     }, 
     { 
      "Name": "Antonio Moreno Taquería", 
      "City": "México D.F.", 
      "Country": "Mexico" 
     }] 
} 

在这里,我想在列表视图解析离子这个数据。我不知道如何用数组解析数据。请提出解决方案或教程以获得结果。我想在Listview中显示所有名称。 我正在使用此api链接:http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt 在此先感谢。

+0

你离子的应用程序不会有一个web服务。该应用程序可以/将消耗Web服务。 Ionic是您应用程序的“客户端”。看看这篇文章:https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/ –

+0

是的,我想消费webservice ex:http ://www.w3schools.com/angular/customers.php我想在列表视图中显示这些数据。 @ChristianBenseler –

+0

你可以关注我已链接的这篇博文/教程。它一步一步解释所有事情。 –

在这里你不需要解析JSON数据,它已经是对象格式。

您可以使用这样

var myData = { 
    "records": [ 
     { 
      "Name": "Alfreds Futterkiste", 
      "City": "Berlin", 
      "Country": "Germany" 
     }, 
     { 
      "Name": "Ana Trujillo Emparedados y helados", 
      "City": "México D.F.", 
      "Country": "Mexico" 
     }, 
     { 
      "Name": "Antonio Moreno Taquería", 
      "City": "México D.F.", 
      "Country": "Mexico" 
     }] 
} 
var record1 = myData.records[0]; 
var record2 = myData.records[1]; 
var record3 = myData.records[2]; 

console.log(record1) 
console.log(record2) 
console.log(record3) 

console.log("Record 1 Data:") 
console.log('\t'+"Name: "+record1.Name) 
console.log('\t'+"City: "+record1.City) 
console.log('\t'+"Country: "+record1.Country) 

console.log("Record 2 Data:") 
console.log('\t'+"Name: "+record2.Name) 
console.log('\t'+"City: "+record2.City) 
console.log('\t'+"Country: "+record2.Country) 

console.log("Record 3 Data:") 
console.log('\t'+"Name: "+record3.Name) 
console.log('\t'+"City: "+record3.City) 
console.log('\t'+"Country: "+record3.Country) 
+0

先生我有web服务w3schools.com/angular/customers.php @rajpeer –

+0

使用angularjs ng-repeat –