如何显示我的JSON数据expressjs / angularjs

时间:2016-03-16 12:23:08

标签: angularjs json express

我是JSON的初学者。

我想在我的html <div>中显示我的所有JSON数据,但我不知道如何使用EXPRESSJS对象。

查找我的JSON数据

app.post("/form",function(req,res)
{
    var departure=req.body.departure;
    var destination=req.body.destination;

        response = {
            "flights": [{
                "departure": departure,
                    "destination": destination,
                    "time": {
                        departure: 10,
                        destination: 12
                    },
                    "price": 2000
            }, {
                "departure": departure,
                    "destination": destination,
                    "time": {
                        departure: 12,
                        destination: 14
                    },
                    "price": 4000
            }, {
                "departure": departure,
                    "destination": destination,
                    "time": {
                        departure: 14,
                        destination: 16
                    },
                    "price": 8000
            }]
        };
    res.json({departure: departure, destination: destination});
});

我的HTML

<div ng-repeat="item in response">
    <dir>{{item.departure}}</dir>
    <dir>{{item.destination}}</dir>
    <dir>{{item.time.departure}}</dir>
    <dir>{{item.time.destination}}</dir>
    <dir>{{item.price}}</dir>
</div>

AngularJS代码

app.controller('formController', function($scope, $http) {
    $scope.pageClass = 'form';
    $scope.departure = '';
    $scope.destination = '';
    $scope.submit = function() {
        $http.post('/form', {
            departure: $scope.departure,
            destination: $scope.destination
        }).then(function(res) {
            $scope.response = res.data;
        });
    }
});

目前我正在询问我的出发地和目的地。有没有办法通过编写我的res.json()而不用变量变量来显示我的所有数据?我想我也必须用ng-repeat做一些事情?

先谢谢你

2 个答案:

答案 0 :(得分:1)

是的,您需要使用ng-repeat

&#13;
&#13;
var app = angular.module('app',[]);
  app.controller('myController',function($scope){
    $scope.response = {
            "flights": [{
                "departure": "departure1",
                "destination": "destination1",
                "time": {
                    departure: 10,
                    destination: 12
                },
                "price": 2000
            }, {
                "departure": "departure2",
                    "destination": "destination2",
                    "time": {
                        departure: 12,
                        destination: 14
                    },
                    "price": 4000
            }, {
                "departure": "departure3",
                    "destination": "destination3",
                    "time": {
                        departure: 14,
                        destination: 16
                    },
                    "price": 8000
            }]
        };
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myController">
    <div ng-repeat="item in response.flights">
      <dir>{{item.departure}}</dir>
      <dir>{{item.destination}}</dir>
      <dir>{{iteme.time.departure}}</dir>
      <dir>{{item.time.destination}}</dir>
      <dir>{{item.price}}</dir>
    </div>
  </div>  
</div>
&#13;
&#13;
&#13;

查看文件:https://docs.angularjs.org/api/ng/directive/ngRepeat

答案 1 :(得分:0)

您需要使用ng-repeat

<div ng-repeat="flight in response.flights">
    <dir>{{flight.departure}}</dir>
    <dir>{{flight.destination}}</dir>
    <dir>{{flight.time.departure}}</dir>
    <dir>{{flight.time.destination}}</dir>
    <dir>{{flight.price}}</dir>
</div>

Reference for ngRepeat

可以在documentation site for AngularJS

上找到任何Angular的好参考