How to display json stringify array data in node.js "html page"?

Question

I have a JSON data array which is the response of the predict(...) call from Clarifai recognition and I am trying to display the array of data in my HTML. I use ng-repeat to display the array but it doesn't work. How can I display the array in the HTML? Below is my code snippet for the JS file and the HTML file.

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>

M0nst3R · Accepted Answer · 2017-10-04 13:12:12Z

1

I suggest manually triggering a digest cycle because your predict call is 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",'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);
        }
    ); 
});

edited Oct 4, 2017 at 13:12

answered Oct 4, 2017 at 12:17

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Blundering Philosopher Over a year ago

Also, instead of using the $timeout function, you can use $scope.$digest() -> See my answer to this question: stackoverflow.com/questions/42620655/…

M0nst3R Over a year ago

Yeah sure, that too.

Ekoo Chaan Over a year ago

@ Ghassen Louhaichi i have another question a bout angular js can u send me ur email please

M0nst3R Over a year ago

It's not good to paste personal information here, I suggest you create a new question and paste the link here. Or if it's related to this question, you can edit this one.

M0nst3R Over a year ago

Just add a comment here or in the question indicating that you have edited it with the new question.

|

Collectives™ on Stack Overflow

How to display json stringify array data in node.js "html page"?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related