您如何通过键从 JavaScript 字典数组中获取 object？

Question

I hope I'm using the right terminology...I'm usually a Python guy, so I'm used to the dictionary datatype. Anyway, I'm working on a Node app right now, and I've run into a problem. I'm having users select from a dropdown menu, which is populated via an array of dictionary objects passed into EJS. Each object has a slug, and a name. So, it would be something like this:

const computers = [{slug: 'dell-desktop', name: 'Dell Desktop'}, {slug: 'macbook-pro', name: 'MacBook Pro'}, {slug: 'imac-27-inch', name: 'iMac, 27-Inch'}];

I populate the form using the names, but I will need the slugs for URL stuff in the backend. So it looks like this:

app.get('/form', function(req, res){
res.render('form.ejs', {computers: computers});
});

Everything seems to work beautifully in general, with the form populating as expected:

<select id = 'computer' name = 'computer'>
        <% for (var i = 0; i<computers.length; i++) { %>
          <option value = '<%= computers[i].slug %>'><%= computers[i].name %></option>
          <% } %>
        </select>

However, the data that I receive from the form just provides the slug. My question is, is there a good way to use the slug key to then get the name from the array of dictionaries? I've tried like this, but it's not working, and I wonder if it's because they're in an array?

app.post('/form', function(req, res){
  var c_slug = req.body.computer;
  var name = computers[c_slug];
  console.log(c_slug);
  console.log(name);
  res.send('Success!')
});

I haven't been able to find anything specific to this in my searches. I've found a mapping explanation, but that gets all of the values for a given key. I'm hoping there's just something obvious I'm missing!

Answer 1

You can use Array.find() method to find the element in array which matches given criteria.

It returns the value of the first element in the array that satisfies the provided testing function. Otherwise, undefined is returned.

app.post('/form', function(req, res){
  const c_slug = req.body.computers;
  const element = computers.find(el => el.slug === c_slug);
  // element is either an element that was found or undefined
  if (element) {
     const name = element.name;
     // the above can be written like this in ES6
     // const { name } = element;

     // do something
  } else {
     // return 400 (Bad Request)
  }
...

PS I'm using const instead of var which is ES6 syntax and arrow function () =>... . Both are available on server-side in NodeJS 8+.

Answer 2

you can use.find() method

app.post('/form', function(req, res){
  var c_slug = req.body.computers;
  var computer = computers.find(el => el.slug === c_slug);
  console.log(c_slug);
  console.log(computer.name);
  res.send('Success!')
});

or you can find it manually

app.post('/form', function(req, res){
  var c_slug = req.body.computers;
  var name ;   
  for (let i = 0; i < computers.length; i++) {
    if (computers[i]['slug'] === c_slug) {
      name = computers[i]['slug'];
      break;
    }
  }
  console.log(c_slug);
  console.log(name);
  res.send('Success!')
});