matching a key from my input field to my json object

Question

$ (function() {

  var heroes = {

    "Abaddon":{
      "counters": "Undying" + "Anti-Mage" + "Outworld Devourer" + "Shadow Demon" + "Techies" + "Ancient Apparition" + "Meepo" + "Riki"
    },
    "Alchemist":{
      "counters": "Riki" + "Ursa" + "Drow" + "Phantom Assassin" + "Troll Warlord" + "Bounty Hunter" + "Slark" + "Lifestealer"
    },
    "Ancient Apparition":{
      "counters": "Anti-Mage" + "Clinkz" + "Riki" + "Juggernaut" + "Zeus" + "Techies" + "Phantom Assassin" + "Spectre"
    },
    "Axe":{
      "counters": "Timbersaw" + "Venomancer" + "Silencer" + "Necrophos" + "Zeus" + "Phoenix" + "Lich" + "Ancient Apparition"
    },
    "Bane":{
      "counters": "Phantom Lancer" + "Chaos Knight" + "Meepo" + "Tidehunter" + "Sand King" + "Razor" + "Naga Siren" + "Undying"
    },
    "Batrider":{
      "counters": "Huskar" + "Viper" + "Juggernaut" + "Sniper" + "Venomancer" + "Undying" + "Weaver" + "Drow Ranger"
    },
    "Beastmaster":{
      "counters": "Axe" + "Bristleback" + "Lich" + "Timbersaw" + "Zeus" + "Meepo" + "Centaur Warrunner" + "Tidehunter"
    },
    "Bloodseeker":{
      "counters": "Wraith King" + "Techies" + "Tiny" + "Troll Warlod" + "Lifestealer" + "Dragon Knight" + "Legion Commander" + "Chaos Knight"
    },
    "Bounty Hunter":{
      "counters": "Phantom Lancer" + "Slardar" + "Meepo" + "Naga Siren" + "Bloodseeker" + "Chaos Knight" + "Huskar" + "Techies"
    },
    "Brewmaster":{
      "counters": "Undying" + "Omniknight" + "Death Prophet" + "Timbersaw" + "Weaver" + "Techies" + "Queen of Pain" + "Anti-Mage"
    },
    "Bristleback":{
      "counters": "Necrophos" + "Venomancer" + "Viper" + "Ancient Apparition" + "Razor" + "Death Prophet" + "Clockwerk" + "Omniknight"
    },


  };


  var keys = [];
  for(var k in heroes) keys.push(k);

    $("#searchBar").autocomplete({
      source: keys
    });

  $( "#searchBar" ).autocomplete({ minLength: 2 });
  var minLength = $( "#searchBar" ).autocomplete( "option", "minLength" );
  $( "#searchBar" ).autocomplete( "option", "minLength", 2 );
  $( "#searchBar" ).autocomplete({ autoFocus: true });
  $( "#searchBar" ).autocomplete({response: function( event, ui ) {} });



  $("#searchBar").bind("keypress", function(e) {
    var key = e.keyCode || e.which;
    if(key == 13) { 
      for (var i = 0; i < heroes.length; i++) {
        if (document.getElementById("searchBar").value == heroes);
        document.getElementById("placeholder").innerHTML = heroes.counters;
      };
    }
  });
});

So basically what I'm trying to build is a counter hero list. what I want to achieve is that when I put a string into the input field (#searchBar) it will run it through my object and see if it matches, it it matches it will return the value(counters, but it's not working.

I put an e.which on enter. so everytime I hit enter and the string matches the key in the searchbar, it will display the counters. but it isnt working.. — DACA92, Nov 11 '14 at 14:20
Why is your object needlessly concatenating hundreds of string literals? — Rory McCrossan, Nov 11 '14 at 14:21
Sorry if I misinterpreted the question but let me explain the object. The object as Heroes such as, "Axe", "Bane". These heroes in turn have heroes that can counters them. Thus the all the strings that belong to "counters" — DACA92, Nov 11 '14 at 14:25

Roman · Accepted Answer · 2014-11-11T14:43:36.950

3

You are not iterating object fields correctly.

Also I suggest you to use select event of Autocomplete plugin instead of keypress

Here's working code:

  $( "#searchBar" ).autocomplete({select: function( event, ui ) {
        for (var hero in heroes) {
          if (document.getElementById("searchBar").value == hero) {
            document.getElementById("placeholder").innerHTML = heroes[hero].counters;
          }
        };
  } });

http://jsfiddle.net/bo1ce55L/2/

edited Nov 11 '14 at 14:43

answered Nov 11 '14 at 14:34

Roman

189
1
6

Thanks for the help man it WORKS! Finally! Could you just explain "for (var hero in heroes)" how it works? – DACA92 Nov 11 '14 at 14:41
Sure, it is already explained earlier, check this out - http://stackoverflow.com/q/7241878/2234089 – Roman Nov 11 '14 at 14:45
1

full description of for ... in statement you can read here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in – Roman Nov 11 '14 at 14:47

matching a key from my input field to my json object

1 Answers1