how to get complex json object and render it in views in node js?

how to get complex json object and render it in views in node js?

Problem

I have following json with arrays in it

In server I’m sending json like this

getTrips: function getTrips(req, res, next){
     var url = '/CTB-WS/rest/trips?from='+ req.tripinfo.fromCityId + '&to=' + req.tripinfo.toCityId + '&depart-date=' + req.tripinfo.departDate+ '&pax=1';
     console.log(url);
     rest.get(url).on('complete', function(trips) {
      if (trips instanceof Error) {
        console.log('Error:', trips.message);
        } else {        
          console.log('trips'+ JSON.stringify(trips)); 
          console.log('onward trips'+ JSON.stringify(trips['onwardTrips']));  
          trips = trips || [];
          req.trips = trips['onwardTrips'];
          next();
        }
    });
  },

  sendTrips: function sendTrips(req, res, next){
   res.render('trips', { trips: req.trips});

  }

In view , I’m able to catch trip id, but not pickupPointDetails and dropoffPointDetails which are inside array, how can I render it in view?

extends layout

block content
  h3 Trip Selection
    form.form-horizontal(id="Findtrips", accept-charset="UTF-8", action="", method="post" enctype="multipart/form-data")
      each trip, key in trips
    p 
      a(href="") #{trip.tripId} #{key} #{trips.length}
    p= trip.pickupPointDetails[0].pickupPointId  //[0] [1] works but when i give key as value Unexpected token =

JSON object

{
  "onwardTrips": [
    {
      "tripId": "1285758",
      "fromCity": "Singapore",
      "toCity": "Shah Alam",
      "operatorCode": "SA",
      "operatorName": "Starmart Express",
      "departTime": "2014-01-24 11:30:00.0",
      "busType": "Executive",
      "pickupPointDetails": [
        {
          "pickupPointId": "78",
          "departureTime": "2014-01-24 11:30:00.0",
          "pickupPointName": "Golden Mile Tower, Beach Road"
        }
      ],
      "dropoffPointDetails": [
        {
          "dropOffPointName": "Shah Alam Bus Terminal",
          "dropOffPointId": "1285758"
        }
      ],
      "fareDetails": {
        "adultFare": "91.0"
      }
    },
    {
      "tripId": "1285856",
      "fromCity": "Singapore",
      "toCity": "Shah Alam",
      "operatorCode": "SA",
      "operatorName": "Starmart Express",
      "departTime": "2014-01-24 21:00:00.0",
      "busType": "Executive",
      "pickupPointDetails": [
        {
          "pickupPointId": "78",
          "departureTime": "2014-01-24 21:00:00.0",
          "pickupPointName": "Golden Mile Tower, Beach Road"
        }
      ],
      "dropoffPointDetails": [
        {
          "dropOffPointName": "Shah Alam Bus Terminal",
          "dropOffPointId": "1285856"
        }
      ],
      "fareDetails": {
        "adultFare": "91.0"
      }
    }
  ],
  "errorCode": 0
}
Problem courtesy of: jyoti

Solution

You need to nest another loop if you wish to access each object in the sub array:

Example JSON object:

{
  "array": [
    {
      "property": "Hello",
      "nestedArray": [
         {
           "nestedArrayProp": "World"
         }
      ]
    }
  ]
}

Example Jade template:

each object in array
  each nestedObject in object.nestedArray
    p= object.property + ' ' + nestedObject.nestedArrayProp

Which will output:

<p>Hello World</p>
Solution courtesy of: srquinn

Discussion

Leave a Reply

Your email address will not be published. Required fields are marked *