JSON 数据未显示在 Ionic HTML 模板上答案

【问题标题】：JSON Data not displaying on Ionic HTML TemplateJSON 数据未显示在 Ionic HTML 模板上
【发布时间】：2016-08-04 16:30:38
【问题描述】：

我一直试图找出我的 Ionic 模板不显示 JSON 数据的原因。我刚开始研究 ionic 框架和 angularjs。

请耐心解答我的新手问题；

1.) json 记录未显示在 HTML 上的错误或原因是什么？

2.) 我见过很多代码示例，其中 Json 代码是写在 controller.js 上而不是 services.js 上。哪一个是标准和安全的？

3.) 我对我的 json 输出有疑问，有人可以确认格式是否正确。

非常感谢您对此提供的帮助。提前致谢

这是我的控制台状态：

Objectconfig: Objectdata: Array[1]0: Array[1]0: Array[1]0: 
Objectcapacity: "7"fuelcap: "120"
make: "Nissan"model: "LoadMaster II"platenumber: "TRG0122"
vehiclecode: "TRK0004"vehicleid: "8"wheelnumber: "10"
__proto__: Objectlength: 1__proto__: Array[0]
length: 1__proto__: Array[0]length: 1__proto__: Array[0]headers: (name)status: 200statusText: "OK"__proto__: Object

在我的模板/HTML 文件中：

<ion-list id="vehicleInformation-list1" class=" " ng-repeat="recs in vehiclerecord">
   <ion-item id="vehicleInformation-list-item1" class="  ">Vehicle Model
      <span class="item-note">{{ recs.model }}</span>
    </ion-item>
</ion-list>

我的控制器文件：

.controller('vehicleInformationCtrl', function($scope, $http) { // TIP: Access Route Parameters for your page via $stateParams.parameterName
// var _this = this;
$http.get('http://myurlsample.com/webserve/').then(function(vehicleinfo    ) {
$scope.vehiclerecord = vehicleinfo.data;
console.log(vehicleinfo);
alert(JSON.stringify(vehicleinfo));
}).catch(function(vehicleinfo)
{
console.log(vehicleinfo);
});
 })

我的 Route.js 文件包含：

 .state('tabsController.vehicleInformation', {
    url: '/vehicleinfo',
    views: {
      'tab4': {
        templateUrl: 'templates/vehicleInformation.html',
        controller: 'vehicleInformationCtrl'
      }
    }
  })

通过 Jsonview 的记录看起来像这样；

[
[
[
{
vehicleid: "8",
platenumber: "TRG0122",
make: "Nissan",
model: "LoadMaster II",
capacity: "7",
fuelcap: "120",
wheelnumber: "10",
vehiclecode: "TRK0004"
}
]
]
]

【问题讨论】：

标签： angularjs json cordova web ionic-framework

【解决方案1】：

如果我正确读取了您的 jsonview 输出，则看起来有很多嵌套： [[[{model: "LoadMaster II", ...}]]]

只有当 $scope.vehiclerecord 看起来像这样时，您的 ng-repeat 才会起作用：

[{model: "LoadMaster II", ...}, ... ]

请注意，这只是一个对象数组，没有像您的 jsonview 输出那样的嵌套数组。

因此，解决方案是使用 http 响应中的 vehicleinfo.data，直到您只有一个对象数组。根据您那里的 jsonview，这将起作用：

$scope.vehiclerecord = vehicleinfo.data[0][0];

【讨论】：