to display JSON file in angularjs

Question

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

3960278 · Accepted Answer · 2020-02-21 01:01:26Z

1

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.

answered Feb 21, 2020 at 1:01

3960278

8167 silver badges13 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

One approach is:

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

For more information, see

AngularJS ng-repeat Directive API Reference - Usage

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

AngularJS Developer Guide - Integration with the browser event loop

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 20, 2020 at 17:00

georgeawg

49k13 gold badges78 silver badges98 bronze badges

2 Comments

findanswer Over a year ago

Thanks @georgeawg, 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

findanswer Over a year ago

thank you for the explanation, it is very clear. But for some reasons it did not work. I ended up using the solution from David Söderberg

David Söderberg · Accepted Answer · 2020-02-21 15:46:33Z

0

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

answered Feb 21, 2020 at 15:46

David Söderberg

193 bronze badges

Collectives™ on Stack Overflow

to display JSON file in angularjs

3 Answers 3

Comments

UPDATE

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

UPDATE

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related