How do I get specific object's attributes after a related event?

Question

I'm not sure my title is clear, but let's take a look.

I have 2 li elements in a ul list, and I want that when I click a li, to get the text of the li and then create an object based on the phones variable.

Example : when I click NEXUS, get a Phone object in my console with attributes :

models: ['5', '6', '5X', '6P'];

Unfortunately, I get i can't pass the constructor name to the return of the function setConstructor(). I tried to write the "modelname" with {} and (), but the code didn't execute at all.

How can I do this?

var phones = {
    NEXUS: {
        name: 'Nexus',
        models: ['5', '6', '5X', '6P']
    },
    IPHONE: {
        name: 'iPhone',
        models: ['5', '5S', '6', '6S']
    }
};

var lastConstructorClicked = {};
var output = {};

function Phone(constructorModels) {
    this.models = constructorModels;
    this.getModels = function () {
        return this.models;
    };
}

function setConstructor(modelname) {
 return phones.modelname.models;   
}

$("a[id^='show-models-']").click(function() {
    lastConstructorClicked = $(this).text();
    console.log(lastConstructorClicked);
 output = new Phone(setConstructor(lastConstructorClicked));
});

console.log(output);

<ul class="dropdown-menu">
    <li><a href="#" id="show-models-iphone">IPHONE</a></li>
    <li><a href="#" id="show-models-nexus">NEXUS</a></li>
</ul>

Paul Roub · Accepted Answer · 2015-10-20T20:04:25.143

phones.modelname.models is going to look for a member actually named modelname, not the member named by that variable. You want:

phones[modelname].models

var phones = {
  NEXUS: {
    name: 'Nexus',
    models: ['5', '6', '5X', '6P']
  },
  IPHONE: {
    name: 'iPhone',
    models: ['5', '5S', '6', '6S']
  }
};

var lastConstructorClicked = "";
var output = {};

function Phone(constructorModels) {
  this.models = constructorModels;
  this.getModels = function() {
    return this.models;
  };
}

function setConstructor(modelname) {
  return phones[modelname].models;
}

$("a[id^='show-models-']").click(function(e) {
  e.preventDefault();

  lastConstructorClicked = $(this).text();
  console.log(lastConstructorClicked);
  output = new Phone(setConstructor(lastConstructorClicked));
  console.log(output);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="dropdown-menu">
  <li><a href="#" id="show-models-iphone">IPHONE</a>
  </li>
  <li><a href="#" id="show-models-nexus">NEXUS</a>
  </li>
</ul>

TimCodes · Answer 2 · 2015-10-20T20:45:03.010

0

use bracket notation to access object

window.onload = function(){


var phones = {
    NEXUS: {
        name: 'Nexus',
        models: ['5', '6', '5X', '6P']
    },
    IPHONE: {
        name: 'iPhone',
        models: ['5', '5S', '6', '6S']
    }
};

var lastConstructorClicked = {};
var output = {};



$("a[id^='show-models-']").click(function() {
    lastConstructorClicked = $(this).text();
    console.log(lastConstructorClicked);

  var   output = phones[lastConstructorClicked].models;

  console.log(output);
});



}

// plunk

http://plnkr.co/edit/SMovCH8s67YfLmMCWYEO?p=preview

edited Oct 20 '15 at 20:45

answered Oct 20 '15 at 20:05

TimCodes

365
2
14

Cool code, interesting I keep that in mind but no thank you the first answer is better for my case because I really need the Legend object, and not just the object. But with your code if i delete the ".models" and can get the entire object... pretty cool. Thank you. – ricko zoe Oct 20 '15 at 20:38

How do I get specific object's attributes after a related event?

2 Answers2