Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

How do I extract 2nd item in array object to list in a separate to table cell.? I am new to JS. Thanks.

I want extract 2nd item in array i.e "Level 2 Charger" object to list in a separate table data.

var unionSqSea = new station ('seattle', 'Level 2 Charger', 'Union Square', "601 Union St, Seattle, WA 98101");

See the entire code below, currently the entire object array prints in 1 table data. I want to list chargerType in separate TD.

// extract 2nd item in array object to list in a separate to table cell 

var locations = [];
// constructor function
function station (city, chargeType, building, fullAddress) {
  this.city = city;
  this.chargeType = chargeType;
  this.building = building;
  this.fullAddress = fullAddress;
  locations.push(this);
}
// Instantiating new objects
var unionSqSea = new station ('seattle', 'Level 2 Charger', 'Union Square', "601 Union St, Seattle, WA 98101");
var pacificPlSea = new station ('seattle','Level 2 Charger', 'Pacific Place', "705 Olive Way, Seattle, WA 98101");
var SheratonTac = new station ('tacoma', 'DC Fast Charger', 'City Center', "234 Main St, Tacoma, WA 98109");
var BellevueMall = new station ('bellevue', 'Level 2 Charger', 'Lincoln Square', '600 100th Pl NE, Bellevue, WA 98004');
var concTechBell = new station ('bellevue', 'DC Fast Charger', 'Concur Technologies', '601 108th Ave NE, Bellevue, WA 98004');
var southParkPor = new station ('portland', 'Level 2 Charger', 'South Park Seafood', '914 SW Taylor St. Portland, OR 97204');
var hotelJupiPor = new station ('portland', 'Tesla Supercharger', 'Hotel Jupiter','800 East Burnside, Portland, OR 97214');
//Object literal
var tracker = {
  getForm: document.getElementById('search'),
  searchWord: null,
  searchMatches: [],
  matchFound: false,
  clearText: document.getElementById('displayArea'),
  chargerOption: [],

  getQueryDataNmatch: function (event) {
    event.preventDefault();
    this.searchWord = event.target.searchName.value;
    this.searchWord = this.searchWord.toLowerCase();
    console.log (this.searchWord);
    tracker.matchFound = false;
    for (var i = 0; i < locations.length; i++) {
      if (locations[i].city === this.searchWord) {
        console.log (locations[i].chargeType + ',' + locations[i].building + ', ' + locations[i].fullAddress);
        tracker.searchMatches.push(locations[i].chargeType + '; ' + locations[i].building + ', ' + locations[i].fullAddress);
        tracker.chargerOption.push (locations[i].chargeType)
      };
    };
  },

  displaySearchResults: function () {
    var full_list = '';

    for (var i = 0; i < tracker.searchMatches.length; i++) {
      full_list = tracker.searchMatches[i];
      var table = document.getElementById('displayArea');
      var tableRow = document.createElement('tr');
      var tableData = document.createElement('td');
      tableData.innerHTML = full_list;
      tableRow.appendChild (tableData);
      // for (idx in tracker.chargerOption) {
      // var tD = document.createElement('td');
      // tD.textContent = tracker.chargerOption[idx];
      // tableRow.appendChild(tD);
      // }
      table.appendChild(tableRow);
      tracker.matchFound = true;
    };
    if (tracker.matchFound === false) {
      console.log ('not found');
      var list = document.getElementById('displayArea');
      var head1 = document.createElement('h1');
      head1.innerHTML = 'That City Is Not in Our System Yet';
      list.appendChild(head1);
    };
  },
  clearData: function() {
    var clearText = document.getElementById('displayArea');
    clearText.innerHTML = '';
    tracker.searchMatches = [];
    tracker.chargerOption = [];
  },

  runAllMethods: function () {
    tracker.clearData (event);
    tracker.getQueryDataNmatch (event);
    tracker.displaySearchResults ();
  },
};
tracker.getForm.addEventListener('submit',tracker.runAllMethods);

Hi Nurbek,

Can you clarify what you want your output to be?

It looks like you are searching by city. Suppose the user searches for portland.

Can you post the desired html table output?

From there we could work backwards on what javascript would be needed to produce that table.

I see that you've commented out a for loop and maybe your problem is around there but I don't know the expected output.

1 Answer

unionSqSea is going to be an object, which has properties. These properties aren't ordered like an array, so it doesn't make sense to look for the second item. What you want is the chargeType property. This is very simple to get:

unionSqSea.chargeType; // "Level 2 Charger"