How to display my JSON datas expressjs/angularjs

Question

I am a beginner in JSON.

I would like to display all my JSON datas in my html <div>, but I am not sure how to do it with an object using EXPRESSJS.

Find bellow my JSON Datas

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});
});

My 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 code

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;
        });
    }
});

At the moment it is displaying only my departure and destination as I asked. Is there a way to display all my datas by writing my res.json() without doing it variable by variable ? I guess I have to do something with ng-repeat as well ?

Thank you by advance

skal88 · Accepted Answer · 2016-03-16 12:49:00Z

1

Yes, you need use ng-repeat

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
            }]
        };
  });

<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>

check the docu: https://docs.angularjs.org/api/ng/directive/ngRepeat

answered Mar 16, 2016 at 12:49

skal88

4843 silver badges11 bronze badges

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

1 Comment

maevy Over a year ago

Thank you very much for this approach, I know how to do it with angularjs but I want to use expressjs. All my datas are in my expressjs file, and then I send it to my angularjs file. I updated my code with my angularjs code to be more clear

Malachi · Accepted Answer · 2016-03-16 14:38:09Z

0

you do need to use a 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

A good reference for anything Angular can be found on the documentation site for AngularJS

edited Mar 16, 2016 at 14:38

answered Mar 16, 2016 at 12:40

Malachi

3,2514 gold badges31 silver badges49 bronze badges

4 Comments

maevy Over a year ago

thank you @Malachi, but when I write my res.json() function like that : res.json(response); it doesn't display anything. How do I write it then in my express post form function ?

maevy Over a year ago

no I don't have, but I can tell you. When I submit, I can see there is no error, but nothing is displayed. I can see it tries to display datas but it put blank space instead. Does it help?

maevy Over a year ago

its ok, it works, I just add flight in response.FLIGHTS

Malachi Over a year ago

I am still not used to getting the objects out of JSON. glad you got it to work, @maevy

Collectives™ on Stack Overflow

How to display my JSON datas expressjs/angularjs

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related