CODEWITHSUNDEEP
node.jsjsonangularjsangularjs-ng-repeat
findanswer
findanswer

Reputation: 35

to display JSON file in angularjs

i have a json file from the backend and I want to display it via ng-repeat. I do not know how to get the element.

In the html file, I want to do something like this

<div ng-repeat = "answer in answers">
  {{answer}}
</div>

on my app.js file, I know I am getting the right data as I have displayed it on the console.log

socket.on('got message', function(data){
  console.log(data);
});

but I do not know how to convert the data to answer. the data on the console.log showed the following, if I expand it, how I get them into {{answer}}

 Global Quote:
    01. symbol: "MSFT"
    02. open: "186.9500"
    03. high: "187.2500"
    04. low: "185.8520"
    05. price: "186.6900"
    06. volume: "5185159"
    07. latest trading day: "2020-02-20"
    08. previous close: "187.2800"
    09. change: "-0.5900"
    10. change percent: "-0.3150%"

I do not have to use socket, it is a local JSON file, only if I know how to read it into {{answer}}.

{ "Global Quote":{
    "01. symbol":"MSFT",
    "02. open":"186.9500",
    "03. high":"187.2500",
    "04. low":"185.8520",
    "05. price":"186.2950",
    "06. volume":"5758297",
    "07. latest trading day":"2020-02-20",
    "08. previous close":"187.2800",
    "09. change":"-0.9850",
    "10. change percent":"-0.5260%"
    }
}

But I am not sure how to pass the data from app.js to the html file. In my app.js file, I have

 socket.on('got message', function(data){
     $scope.answers = new Array;
     $scope.answers = data;
     console.log($scope.answers);
 });

but $scope.answers is passing to the html file

Upvotes: 0

Views: 54

Answers (3)

David S&#246;derberg
David S&#246;derberg

Reputation: 19

<html>
<head>
<title>My website</title>
</head>
<body>
<div ng-repeat="answer in answers">
    <p>{{answer}}</p>
</div>
</body>
</html>

Upvotes: 0

3960278
3960278

Reputation: 796

Referring to your comment on earlier answer, in the Model, View Controller design, your $scope.answer written on the controller makes it automatically available to the corresponding view, more explicitly, an html which has, ng-controller="YourCtrl", will have all the variables written inside $scope of YourCtrl.

One good way to display json is given in earlier answer. If u don't exactly know the structure of json, u can use this as well.

<pre>{{answer | json}}</pre>

Here json is an angular filter to display json data.

Upvotes: 1

georgeawg
georgeawg

Reputation: 48968

One approach is:

<div ng-repeat="(key, value) in answers['Global Quote']">
    {{key}} : {{value}}
</div>

For more information, see

UPDATE

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

You can also use $apply() to enter the AngularJS execution context from JavaScript:

socket.on('got message', function(data){
    $scope.$apply(function() {       
        $scope.answers = data;
        console.log($scope.answers);
    });
});

Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.

For more information, see

Upvotes: 0

Related Questions