2015-04-02 3 views
2

Возможно, я неправильно структурировал этот код (впервые работаю с Javascript), но я хочу взять пользовательский ввод и выполнить поиск массива массивов, чтобы проверить, существует ли массив с таким именем существует.Javascript: Использование пользовательского ввода для поиска массива массивов

Сначала я попытался использовать функцию eval(), которую мне сказали не очень хорошо, но она работает, когда есть совпадение, если не существует совпадения, которое не существует.

Основная предпосылка программы - это массив, содержащий местоположения, которые впоследствии являются массивами, содержащими продукты питания. Пользователь вводит имя пищевого продукта и там, где он хочет его поместить, и он создает объект питания, вставляет этот объект в нужное место в массивах и также вводит элемент в список, отображаемый в html.

Вот весь код до сих пор:

var fridge = []; 
 
var freezer = []; 
 
var pantry = []; 
 

 
var locations = [fridge, freezer, pantry]; 
 

 

 
function Food(name, location, locationName){ 
 
    this.name = name; 
 
    this.location = location; 
 
    this.locationName = locationName; 
 
    this.displayName = function(){ 
 
     alert(this.name); 
 
    }; 
 
}; 
 
function createFood(){ 
 
    var name = prompt("Enter the items name:"); 
 
    var locationName = prompt("Enter a location to store it:") 
 
    var location = eval(locationName); 
 

 
    while(locations.indexOf(location) == -1){ 
 
     alert("This is not an actual location."); 
 
     locationName = prompt("Please enter another location:"); 
 
     location = eval(locationName); 
 
    }; 
 

 
    var x = new Food(name, location, locationName) 
 

 
    function insertFood(Food){ 
 
     var a = locations.indexOf(Food.location); 
 
     locations[a].push(Food); 
 

 
     var list = document.getElementById(Food.locationName + "_items"); 
 
     var li = document.createElement("li"); 
 
     li.innerHTML = Food.name; 
 
     list.insertBefore(li, list.lastChild); 
 
    }; 
 

 
    insertFood(x); 
 
};

Пожалуйста, дайте мне знать, если это структурировано неправильно причина это была моя идея структурирования на первый взгляд.

Спасибо!

ответ

1

Как было отмечено выше, было бы лучше, чтобы сделать locations объект, так что вы можете иметь ключ (строка), указывающий на массив с таким же именем.

var fridge = []; 
    var freezer = []; 
    var pantry = []; 

    var locations = { 
     "fridge":fridge, 
     "freezer":freezer, 
     "pantry":pantry 
    }; 

Преимущество этого в том, что вам не нужно иметь locationName, поскольку он никогда не вступает в игру. Все, что вам нужно, это проверить, имеет ли объект locations свойство с тем же именем, что и пользовательский ввод, используя встроенную функцию hasOwnProperty. Что-то вроде:

if(!locations.hasOwnProperty(userInputLocation)) 
     alert("That is not a designated location"); 

Тогда ваш конструктор еды также становится проще, и нужно только имя и местоположение свойства:

function Food(name, location){ 
     this.name = name; 
     this.location = location; 
    } 

Вы также можете затем вызвать любое конкретное место непосредственно по его имени (если вы (если вы объявите массивы внутри объекта, как в коде SGD), locations[location], где location - это просто строка, содержащая либо «морозильник», либо «кладовая» или «кладовая», холодильник". Вы также можете вызвать массив через locations[someFood.location].

Во всяком случае я не так много для подсказок и предупреждений (не говоря уже о Eval), поэтому я создал jsBin используя поля ввода, вы можете проверить его здесь: http://jsbin.com/pamoquwuhu/1/edit

отредактирован добавить: Если цель заключается в том, что вы позже захотите найти пищу по его названию во всех местах, в которых она сохранена, было бы лучше добавить/нажать foodObj.name вместо целого foodObj в locations[location]. Затем вы можете использовать собственный цикл for(property in object) в объекте местоположений, чтобы увидеть, где можно хранить всю данную пищу, и вставлять ее в массив results. Так что ваша findFood функции может содержать следующее (в предположении food является входным пользователем строки названия продуктов питания для поиска:

var results = []; 

    for(var loc in locations){ // loops through the property names in `locations` 
     if(locations[loc].indexOf(food)>=0) 
      results.push(loc); 
    } 

    if(!results.length){ 
     alert(food+' was not found'); 
    else 
     alert(food+' was found in '+results.toString()); 

Предполагая ту же пищу, может храниться в нескольких местах, и что вы хотите, чтобы найти данную пищу по его названию, ваше имуществовашего пищевого объекта станет менее важным (или, возможно, бесполезным).

+0

Большое вам спасибо за помощь. Определенно изучая тонну вещей, о которых я не знал. Несколько вопросов: Какова цель e.preventDefualt() в этой ситуации и каковы преимущества querySelector() над getElementById()? – Mark

+0

_e_ - это имя, которое я дал первому аргументу функции обработчика событий - в JS это всегда событие. Событие имеет всевозможные свойства (положение мыши, тип события, цель и т. Д.), И вы можете прочитать об этом здесь: https://developer.mozilla.org/en/docs/Web/API/Event.Since я использовал в моем примере, действие по умолчанию в событии отправки «клик» должно отправить форму в URL, указанный в форме. – Sidd

+0

... Но я не хочу отправлять на другой URL-адрес, я использовал только форму, чтобы использовать входные значения (и, прежде всего, чтобы нажатие «enter» после заполнения полей также вызывало бы обработчик только как щелчок) - поэтому я должен предотвратить это действие по умолчанию с помощью _e.preventDefault() _. Всякий раз, когда есть действие по умолчанию, связанное с событием (например, переход на другую страницу или что-то еще), и вы хотите переопределить это, _event.preventDefault() _ - ваш друг. В противном случае код в обработчике будет запущен, а затем продолжит действие по умолчанию. – Sidd

0

Вы используете функцию как функцию/конструктор и как имя параметра (это не должно быть проблемой, но может вызвать проблемы позже), и вы никогда не звоните insertFood. Также места должны скорее быть объектом, чем массивом, чтобы вы могли обращаться к вспомогательным массивам, как в своем коде.

var locations = {fridge : [], freezer:[], pantry:[]]; 
 

 

 
function Food(name, locationName){ 
 
    this.name = name; 
 
    this.locationName = locationName; 
 
    this.displayName = function(){ 
 
     alert(this.name); 
 
    }; 
 
}; 
 
function createFood(){ 
 
    var name = prompt("Enter the items name:"); 
 
    var locationName = prompt("Enter a location to store it:") 
 

 
    while(locationName in locations){ 
 
     alert("This is not an actual location."); 
 
     locationName = prompt("Please enter another location:"); 
 
    }; 
 

 
    var x = new Food(name, locationName) 
 

 
    function insertFood(food){ 
 
     locations[food.locationName].push(food); 
 

 
     var list = document.getElementById(food.locationName + "_items"); 
 
     var li = document.createElement("li"); 
 
     li.innerHTML = food.name; 
 
     list.insertBefore(li, list.lastChild); 
 
    }; 
 
    // call the method now? 
 
    insertFood(x); 
 
}; 
 
createFood();

+0

Спасибо, insertFood за пределами функции createFood изначально, а затем перенес его, возможно, теперь я должен изменить имя параметра. – Mark

+0

Да, я просто увидел, что, когда я сменил места на объект, код не был полностью обновлен, он должен быть теперь. – SGD

Смежные вопросы