Display elements of json array using AngularJS

Question

Being a novice to angularjs framework I'm attempting to use a controller to retrieve a JSON and display elements,but the desired result is not displayed.

index.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script src="../public/javascripts/processJson.js"></script>
</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}}">
 </div>
  </div>
  </div>
</div>
 </body>
 </html>

Controller : processJson.js

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

 });

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;

Also utilising mongodb to store and retrieve as JSON data.. URL http://localhost:3000/fields/fieldlist returns my json array stored in mongodb.

Can you show us an example of what the JSON looks like please? — Phil Kearney
– Phil Kearney, Commented Aug 7, 2015 at 9:04
Please include where you facing problem? Do you get desired data in $scope.posts? — Navaneet
– Navaneet, Commented Aug 7, 2015 at 9:04

ArBro · Accepted Answer · 2015-08-07 09:19:34Z

2

Can you try $scope.posts = data.data.

The HTTP request will return an object with the data property inside:

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions. status – {number} – HTTP status code of the response. headers – {function([headerName])} – Header getter function. config – {Object} – The configuration object that was used to generate the request. statusText – {string} – HTTP status text of the response.

For more information: API Reference - $http

edited Aug 7, 2015 at 9:19

answered Aug 7, 2015 at 9:11

ArBro

7316 silver badges18 bronze badges

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

Comments

Simone-Cu · Accepted Answer · 2015-08-07 09:17:28Z

1

You have a ng-switch-when without an ng-switch around that causes me an error:

Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

I've prepared a JSFiddle https://jsfiddle.net/5ab19ozh/

answered Aug 7, 2015 at 9:17

Simone-Cu

1,1298 silver badges22 bronze badges

Collectives™ on Stack Overflow

Display elements of json array using AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related