Populating a dropdown list in form with another models data in nodejs

Question

I am trying to populate a dropdown list for a form for one of my models (cars), with data from another model (colours), but cannot seem to figure out how to do this. I need to somehow call the list of colours into the dropdown in the cars.jade file, so that when a user selects the auto-filled list I need the ObjectID to be the value of the item (which subsequently is saved as a new car.

Cars New Form (car.jade):

/* This is the bit I'm having trouble with */
select(name='carColours')
  option(value='')
  each colour in colours
    - var select=null; if (colour.title == carColours.title) select='selected';
    option(value=colour._id, selected=select)= colour.title

Cars controller (cars.js):

exports.new = function(req, res){
  res.render('cars/new', {
    title: 'New Car',
    event: new Car({})
  })
}

Cars model (car.js):

var CarSchema = new Schema({
  title: {type : String, default : '', trim : true},
  colour: {type : Schema.ObjectId, ref : 'Colour'},
})

Colours model (colour.js)

var ColourSchema = new Schema({
  title: {type : String, default : '', trim : true},
  hexadecimal: {type : String, default : '', trim : true},
})

ColourSchema.statics = {

  list: function (options, cb) {
    var criteria = options.criteria || {}

    this.find(criteria)
      .sort({'title': 1}) // sort alphabetically
      .exec(cb)
  }

}

Where is the colours array in care.jade coming from? And what error are you getting exactly, if any? — dcodesmith
– dcodesmith, Commented Jan 13, 2014 at 14:09
I have added in the colours model (not array) and updated the description. I am not really getting any errors yet as I don't know how to approach the solution, which is why I was asking here. — Matt Rowles
– Matt Rowles, Commented Jan 13, 2014 at 20:53

juanpaco · Accepted Answer · 2014-01-13 23:20:28Z

3

+50

Your call to render in cars.js needs to supply the list of colors.

exports.new = function(req, res){
  res.render('cars/new', {
    title: 'New Car',
    event: new Car({}),
    colours: [<list of possible colours>]
  })
}

The object you pass to render after the path to the view template is the context in which your view template operates. If that object doesn't have the property in question (in this case colours), then neither will your view template. (There is an exception to that, but it doesn't look like you're using it here).

I go into this in the latest episode of a screencast series I produce (http://www.learnallthenodes.com/episodes/9-view-templates-in-nodejs-with-jade). I'm not sure the exact timestamp of when I hit that part.

edited Jan 13, 2014 at 23:20

answered Jan 13, 2014 at 23:15

juanpaco

6,4532 gold badges31 silver badges22 bronze badges

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

9 Comments

juanpaco Over a year ago

I suppose you could add the array as a static to your schema. Something like possibleColours: ['red','green','blue'] and then just pass it in as colours: Colour.possibleColours. I'm assuming that you have a defined set of possible colours and that they aren't dynamic. Does that help?

juanpaco Over a year ago

I'm assuming that your colours come from the list static function on your model. In that case, in your route handler you'd need to call that function, and inside its callback you'd do your render call. Here's a gist: gist.github.com/juanpaco/8410206

juanpaco Over a year ago

Yes, although it will expose another issue. carColours.title is calling title on a variable carColours that isn't defined. You would similarly need to pass in a reference to your Car instance to check against the list of colors.

juanpaco Over a year ago

Sure thing. Then yeah, the reason I called it colours in the route handler was because that was the variable you used in your template. So that should function as a drop-in replacement.

Matt Rowles Over a year ago

Works a charm mate, you legend! I've accepted it, will award bounty in 12 hours when it lets me.

|

Collectives™ on Stack Overflow

Populating a dropdown list in form with another models data in nodejs

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related