【问题标题】:Display elements of json array using AngularJS使用AngularJS显示json数组的元素
【发布时间】:2015-08-07 09:02:13
【问题描述】:

作为 angularjs 框架的新手,我正在尝试使用控制器来检索 JSON 并显示元素,但未显示所需的结果。

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>

控制器: 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;

还利用 mongodb 作为 JSON 数据存储和检索。URL http://localhost:3000/fields/fieldlist 返回我存储在 mongodb 中的 json 数组。

【问题讨论】:

  • 你能给我们看一个 JSON 是什么样子的例子吗?
  • 请包括您面临的问题?您是否在 $scope.posts 中获得了所需的数据?
  • @PhilKearney 添加了更多代码
  • @Navaneeth 添加了更多代码

标签: html angularjs


【解决方案1】:

你可以试试$scope.posts = data.data。

HTTP 请求将返回一个对象,其中包含 data 属性:

响应对象具有以下属性:

data – {string|Object} – 使用 变换函数。 status - {number} - HTTP 状态码 回复。 headers – {function([headerName])} – 标头获取函数。 config - {Object} - 用于生成的配置对象 请求。 statusText – {string} – 响应的 HTTP 状态文本。

欲了解更多信息:API Reference - $http

【讨论】:

    【解决方案2】:

    你有一个 ng-switch-when 没有一个 ng-switch 导致我出错:

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

    我已经准备了一个 JSFiddle https://jsfiddle.net/5ab19ozh/

    【讨论】:

      猜你喜欢
      • 2015-09-11
      • 1970-01-01
      • 2016-08-18
      • 2020-10-12
      • 1970-01-01
      • 1970-01-01
      • 2015-07-20
      • 1970-01-01
      • 2013-08-28
      相关资源
      最近更新 更多