Angular controller to retrieve json data

Question

Here I'm actually trying to get json data and display them on a jade template with the use of an angular controller.

Controller : processJson.js

 var getJson = angular.module('getJson', []).controller('controller1',   function ($scope, $http) {
var url = '/fields/fieldlist';
console.log(url);
$http.get(url).success(function (data) {
    $scope.posts = data;
  });

 });

This doesn't parse json array to jade template

fields.js

var express=require('express');
var router =express.Router();


 router.get('/fieldlist',function(req,res){
  var db=req.db;
  var collection=db.get('domlist');
   collection.find({},{},function(e,docs){
    res.json(docs); 
  });  
});

module.exports=router;

This successfully returns a json array object.

Here's my jade template

html
head


body 
     div(ng-app='getJson')
        div(ng-controller='controller1')
            div(ng-repeat='post in posts')
                div(ng-switch-when='text')

                    input(type='text' id='{{post.id}}' ng-model='post.value' placeholder='{{post.placeholder}}')

                    block content

Elarcis · Accepted Answer · 2015-08-12 10:52:13Z

Several things here :

Don't use $http in your controller. Ajax requests and general data sending/retrieval should go in a service or a factory that you inject into your controller.

In this case, you should consider coding a fieldService containing a getFields() method and invoking it from your controller.

Since I highly doubt this is the cause of your problem, I'm going to point out what bugged me in your examples:

Your use of $http is prone to a lot of headaches, if not wrong at all. You might be interested by $http's documentation, which explains the most recommended ways of using it. Also consider catching errors on your requests, just in case anything goes wrong and prevents your data to be displayed.
In your template, you're using a ng-switch-when attribute without any parent ng-switch. I'm no expert of course, but I'm not sure it's going to work. If you want your div to show when 'text' is truthy, consider using ng-if or ng-show, or even a filter in your ng-repeat.
I also assume 'text' is a scope variable you forgot to put in your example.
Your url is not the same in both your examples, are you sure they're both correct?

I don't have time to try to reproduce your issue, sorry. I hope at least one of these points might help you understanding what you did wrong.

Community · Accepted Answer · 2017-05-23 12:15:22Z

0

To test your solution consider breaking it down into separate testable components. Frequently use of the ng-init angular directive supplied with hard-coded JSON can reveal problems and incorrect assumptions.

Here is a SO question on ng-init....

SO ng-init-json-object

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Aug 12, 2015 at 10:38

S Meaden

8,3203 gold badges39 silver badges74 bronze badges

Collectives™ on Stack Overflow

Angular controller to retrieve json data

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related