CODEWITHSUNDEEP
javascriptjsonangularjsnode.js
TheLoneWolf91193
TheLoneWolf91193

Reputation: 416

Angular controller to retrieve json data

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

Upvotes: 1

Views: 418

Answers (2)

Elarcis
Elarcis

Reputation: 231

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.

Upvotes: 4

S Meaden
S Meaden

Reputation: 8270

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

Upvotes: 0

Related Questions