AngularJS display one json object

Question

I receive from my rest api news with the specified id. When I display all news I used ng-repeat and works fine but when I want display one object this method is not working.

My .when code:

.when('/displaynews/:id',{
    templateUrl: 'views/display.html',
    controller: 'NewsDisplayController',
    constollerAs: 'displaydash'
})

and the controller:

.controller('NewsDisplayController',
    function($routeParams, NewsModel){

      var displaydash = this;
      var newsId = $routeParams.id;
      path = 'getNewsById/'+newsId;

      function getNewsById() {
          NewsModel.getNewsById().then(function (result){
              displaydash.news = result.data;
              console.log(displaydash.news);
          })
      }

      getNewsById();
})

Result from console.log:

Object { id="56f1ba6b275c8aa5bf4895d8",  title="Tytul",  text="Text",  more...}

How can I display this in my html template?

I try to display in html file in this way:

<p>{{news.title}}</p>
<p>{{news.text}}</p>

But it's not working

what have you tried? Looks like it will just work to bind to news, correct? — Davin Tryon
– Davin Tryon, Commented Mar 23, 2016 at 9:43
Do you want to show the JSON as a JSON string, or show the content out of it? — Mark Hughes
– Mark Hughes, Commented Mar 23, 2016 at 9:44
Have you tried to bind anything to the template. Try a hard coded property of displaydash. — Davin Tryon
– Davin Tryon, Commented Mar 23, 2016 at 9:54

Kailas · Accepted Answer · 2016-03-23 09:48:45Z

2

You can go for :

angular.toJson(JSONObj);

So, here you can go for: in Controller:

displaydash.news = result.data;
$scope.news      = angular.toJson(displaydash.news);

in HTML:

<p>{{news}}</p>

The issue in your question is simple, you are trying to access news object which you have not defined, try creating a scope variable for it, you will be easily able to access it:

 $scope.displaydash.news = result.data;

<p>{{displaydash.news.title}}</p>
<p>{{displaydash.news.text}}</p>

Refer: https://docs.angularjs.org/api/ng/function/angular.toJson

answered Mar 23, 2016 at 9:48

Kailas

7,6183 gold badges50 silver badges65 bronze badges

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

9 Comments

Davin Tryon Over a year ago

the OP is attempting to use the controller as method of binding. So, no $scope required.

Kailas Over a year ago

'OP'? What's that?

Davin Tryon Over a year ago

Original Post. You will come across abbreviation here on SO a lot.

Davin Tryon Over a year ago

but in angular you require a $scope variable to be able to bind the value , that is just incorrect. In fact even the documented example on the angular docs now uses controller as syntax: docs.angularjs.org/api/ng/directive/ngController

Davin Tryon Over a year ago

You might find this interesting as well: toddmotto.com/digging-into-angulars-controller-as-syntax

|

Gilsha · Accepted Answer · 2016-03-23 09:44:16Z

1

If result.data is an object, enclose it with square brackets and set as news, otherwise use it directly.

 displaydash.news = typeof(result.data) == "object"?[result.data]: result.data;

answered Mar 23, 2016 at 9:44

Gilsha

14.6k3 gold badges36 silver badges48 bronze badges

4 Comments

Davin Tryon Over a year ago

why turn it into an array?

Gilsha Over a year ago

lukassz is using ng-repeat and the code works fine when there are multiple objects. So converting the single object to an array should work.

Kailas Over a year ago

@Gilsha, good point, but the api will be returning an array structure right? Even if we have just one object?

Gilsha Over a year ago

Did you see the console.log output in the question? It shows an object and not an array.So assuming getNewsById API returns a single object. lukassz may be using some other API for loading multiple news items.

Collectives™ on Stack Overflow

AngularJS display one json object

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related