Output array of objects javascript

Question

I'm a little way through solving my task of creating a dropdown containing the insurance companies, then a second dropdown showing the insurance types that insurance company offers e.g. property, fleet or motortrade (insurance type offered incudes a number).) Once both select dropdowns have been selected display the relevant number.

At the moment this is as far as I've got thanks to some help below http://codepen.io/anon/pen/yoEiL

Heres the HTML:

<form action="" method="get" class="insurance-numbers">
  <div>
    <select id="company">

    </select>
  </div>
  <div>
    <select id="insurance-type">

    </select>
  </div>
  <div id="insurance-number"></div>
</form>

And Javascript:

var insurancecompanies = [
  { 
    name : 'Advent', 
    property : '01242 674 674', 
    fleet : '', 
    motortrade : ''
  },
  {   name : 'Allianz', 
   property : '0844 412 9988', 
   fleet : '0800 587 5858', 
   motortrade : '' 
  },
  {   name : 'Aviva', 
   property : '0800 015 1498', 
   fleet : '0800 246 876', 
   motortrade : '0800 246 876'
  },
  {   name : 'AXA', 
   property : '0870 900 0867', 
   fleet : '0870 900 0860', 
   motortrade : '0870 900 1753'
  },
  {   name : 'Catlin', 
   property : '', 
   fleet : '0800 066 5364', 
   motortrade : ''
  },
  {   name : 'Chartis', 
   property : '', 
   fleet : '0844 477 6544', 
   motortrade : ''
  },
  {   name : 'Clegg Gifford', 
   property : '', 
   fleet : '', 
   motortrade : '01708 729 529'
  },
  {   name : 'Equity Red Star', 
   property : '', 
   fleet : '0845 609 1235', 
   motortrade : ''
  },
  {   name : 'Highway/LV', 
   property : '', 
   fleet : '0845 373 1244', 
   motortrade : ''
  },
  {   name : 'NIG', 
   property : '', 
   fleet : '0845 300 4644', 
   motortrade : '0845 300 4644'
  },
  {   name : 'QBE', 
   property : '', 
   fleet : '01245 272 700', 
   motortrade : ''
  },
  {   name : 'Royal Sun Alliance', 
   property : '0845 077 0120', 
   fleet : '0845 675 0404', 
   motortrade : '0845 077 0119' 
  },
  {   name : 'Summit', 
   property : '', 
   fleet : '01254 396 655', 
   motortrade : ''
  },
  {   name : 'Zurich', 
   property : '0845 300 2055', 
   fleet : '0800 300 2055', 
   motortrade : ''
  }
];


function findCompany(name) {
  var i = 0, len = insurancecompanies.length;
  for (i; i < len; i += 1) {
    if (insurancecompanies[i].name === name) {
      return insurancecompanies[i];
    }
  }
  return null;
};

var dropdown = [], i = 0, len = insurancecompanies.length;
for (i; i < len; i += 1) {
  dropdown.push(insurancecompanies[i].name);
}

$.each( dropdown, function( i, val ) {
  $("#company").append( "<option val=\""+ val +"\">" + val + "</option>" );
});

$('#company').on('change', function() {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    var selectedInsurance = findCompany(valueSelected);
    for (i in selectedInsurance) {
      $("#insurance-type").append( "<option val=\""+ selectedInsurance[i] +"\">" + selectedInsurance[i] + "</option>" );
    }
});

At the moment it displays the list of insurance companies correctly. It then selects the company chosen on change. I need it to then display the insurance types it offers (ignoring the ones it dosn't (ones with no numbers) then upon that selection display the number in the div#insurance-number.

So to demonstarte if i selected Allianz, the second dropdown would contain 'property' and 'fleet'. If the user selected 'fleet' the number '0800 587 5858' would get appended to the div#insurance-number'.

sorry if this is confusing I really need some help with this that is all.

Answer 1

if you want to create a dropdown of options based on the name property of each object in the array then you'd do something like this:

var dropdown = [], i = 0, len = insurancecompanies.length;
for (i; i < len; i += 1) {
  dropdown.push(insurancecompanies[i].name);
}

Use dropdown to populate your select. Then use the selected option and find the corresponding object in the array by traversing it:

function findCompany(name) {
  var i = 0, len = insurancecompanies.length;
  for (i; i < len; i += 1) {
    if (insurancecompanies[i].name === name) {
      return insurancecompanies[i];
    }
  }
  return null;
};

UPDATE: you need to add an change event on the company select. On change, apply findCompany(selectedOption) and then populate the second select but instead of iterating the array you're going to have to iterate the object properties more or less like so:

var selectedInsurance = findCompany(selectedOption); // selectedOption is the value of the first select 

for (i in selectedInsurance) {
  // here add to your dropdown selectedInsurance[i]
}

Answer 2

To access the object properties use something like myArray[index].property

Here's a DEMO accessing the object property 'name'.

If you want to output the whole object replace (insurancecompanies[i].name) with console.log(insurancecompanies[i]) and view your console log.

To populate the select menu like you asked for with javascript use something like bellow DEMO

var insurancecompanies = [
{ 
    name : 'Advent', 
    property : '01242 674 674', 
    fleet : '', 
    motortrade : ''
},
{   name : 'Allianz', 
    property : '0844 412 9988', 
    fleet : '0800 587 5858', 
    motortrade : ''
},
{   name : 'Aviva', 
    property : '0800 015 1498', 
    fleet : '0800 246 876', 
    motortrade : '0800 246 876'
},
{   name : 'AXA', 
    property : '0870 900 0867', 
    fleet : '0870 900 0860', 
    motortrade : '0870 900 1753'
},
{   name : 'Catlin', 
    property : '', 
    fleet : '0800 066 5364', 
    motortrade : ''
},
{   name : 'Chartis', 
    property : '', 
    fleet : '0844 477 6544', 
    motortrade : ''
},
{   name : 'Clegg Gifford', 
    property : '', 
    fleet : '', 
    motortrade : '01708 729 529'
},
{   name : 'Equity Red Star', 
    property : '', 
    fleet : '0845 609 1235', 
    motortrade : ''
},
{   name : 'Highway/LV', 
    property : '', 
    fleet : '0845 373 1244', 
    motortrade : ''
},
{   name : 'NIG', 
    property : '', 
    fleet : '0845 300 4644', 
    motortrade : '0845 300 4644'
},
{   name : 'QBE', 
    property : '', 
    fleet : '01245 272 700', 
    motortrade : ''
},
{   name : 'Royal Sun Alliance', 
    property : '0845 077 0120', 
    fleet : '0845 675 0404', 
    motortrade : '0845 077 0119'
},
{   name : 'Summit', 
    property : '', 
    fleet : '01254 396 655', 
    motortrade : ''
},
{   name : 'Zurich', 
    property : '0845 300 2055', 
    fleet : '0800 300 2055', 
    motortrade : ''
}
];

function foo() {

   select = document.getElementById('foo');

   for (var i=0; i<insurancecompanies.length; i++){
      var opt = document.createElement('option');
      opt.innerHTML = insurancecompanies[i].name;
      select.appendChild(opt);
   }

}

foo();