Iterate through nested array objects with Jade

Question

I want to render this data on my view with Jade. This is returned from the QPX api. I have data structured like this.

{ 
  kind: 'qpxExpress#tripsSearch',
  trips: { 
    kind: 'qpxexpress#tripOptions',
    requestId: 'OqaX52F0Z433IbMlh0PNr6',
    data: {
      kind: 'qpxexpress#data',
      airport: [Object],
      city: [Object],
      aircraft: [Object],
      tax: [Object],
      carrier: [Object]
    },
    tripOption: [ [Object], [Object], [Object] ] 
  }
}

How do I access the nested object array in tripOption using Jade? I can't seem to work it out. This is my Jade template:

block content
  .ui
    for data in result
      .ui_box
        .ui_box__inner
          .event
            span #{data.tripOption[0].slice[0]}

This is the error I receive from Jade

Cannot read property '0' of undefined

Router

router.get('/', function(req, res, next) {
  api.apiGet(function (data) {
    console.log(data) 
    res.render('index', {result: data})
  })
})

how does your route handler look like when passing the data to your view? There is a disconnect between the data and the view atm without that knowledge. — Sgnl
– Sgnl, Commented Nov 4, 2016 at 12:01
#{data.tripOption[0].slice[0]} the [ ] after slice bothers me... — Sgnl
– Sgnl, Commented Nov 4, 2016 at 12:07
That's from the API documentation but I have tried to remove it already and I still receive the error. — Rhys Edwards
– Rhys Edwards, Commented Nov 4, 2016 at 12:08
.slice() is an array method on javascript not jade. anyway, have you tried #{data.trips.tripOption[0]}? notice the trips between data and tripOption. — Sgnl
– Sgnl, Commented Nov 4, 2016 at 12:10

Sgnl · Accepted Answer · 2016-11-04 12:34:16Z

1

Your for loop is iterating on an object, which won't work. This isn't the usual for..in loop in native javascript

The code below modifies the router a little and passes the data (tripOptions) to the view in a more direct way. First the Jade template:

block content
  .ui
    for data in tripOptions
      .ui_box
        .ui_box__inner
          .event
            span #{data.someProp}

new router with the tripOption data made available to the view as tripOptions (plural):

router.get('/', function(req, res, next) {
  api.apiGet(function (data) {
    console.log(data) 
    res.render('index', {
      tripOptions: data.trips.tripOption
    })
  })
})

answered Nov 4, 2016 at 12:34

Sgnl

1,97123 silver badges31 bronze badges

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

3 Comments

Rhys Edwards Over a year ago

Okay this is great but now I'm being thrown another error: Cannot read property 'length' of undefined. It's on this line for data in tripOptions

Sgnl Over a year ago

yeah seems like tripOptions isn't pointing to an array. Maybe console.log(data) before you call res.render and see if you can access the data sowly, e.g. trying console.log(data.trips) then drilling deeper one property at a time.

Rhys Edwards Over a year ago

Thanks, got there!

Collectives™ on Stack Overflow

Iterate through nested array objects with Jade

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related