如何在node.js“ html页面”中显示json字符串化数组数据？

Ekoo Chaan

我有一个JSON数据数组，它是predict(...)来自Clarifai识别的调用的响应，我正在尝试在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",'https://samples.clarifai.com/puppy.jpeg').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>

加森·卢海奇

我建议您手动触发摘要周期，因为您的predict调用是异步的。

// 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",'https://samples.clarifai.com/puppy.jpeg').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);
        }
    ); 
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。