В вашем подходе есть много аспектов poli sh, но в отношении самой функции поиска:
var gm_obj = game_obj[0].item[0].name,
i, values = [];
gm_obj - это массив массивов:
name:
[
["nothing"],["potion"],["ether"],["revive"],["helmet"],
["coins"], ["medals"],["crown"],["robes"]
]
gm_obj. длина равна 1, поэтому for (var i in gm_obj.length) ничего не значит.
Я полагаю, что ваша предыдущая попытка была
for(var i=0; i<gm_obj.length; i++) {
// check gm_obj[i]
}
В любом случае, вы можете перебирать имена, используя for...of
for (var obj of gm_obj) {
// obj is [nothing], then [potion], then etc...
// for example:
if(["medals"].includes(itm)) {
...
}
}
Это проверка на точное совпадение. Если все в порядке, вы выполняете присваивание
itm = obj; // in your code, itm = gm_obj[i]
Превращает itm из строки в массив. Я не верю, что это твоя цель. Это должно быть
itm = obj[0]; // still a string.
Далее в коде, если вы получили совпадение в одном l oop, а в следующем ничего нет, вы стираете найденное значение:
} else {
itm = null;
}
Вы должны иметь break
if(obj.includes(itm)) {
itm = obj[0];
break;
}
или использовать временную переменную для сохранения результата. Инициализируйте его как null, так что вам не нужно else
let result=null;
for(obj of gm_obj) {
if(obj.includes(itm)) {
result = obj[0];
}
}
Если нормально пропустить другие элементы после совпадения, просто верните:
if(obj.includes(itm)) {
itm = obj[0];
return new item_obj(itm, 'item', true);
}
Наконец Я считаю, что это просто PO C, потому что ваш обработчик onclick не сохраняет результаты поиска.
submitBtn.onclick = function(event) {
target = textBox.value;
getItemValue(target); // not storing
document.getElementById('cout').innerHTML = target;
}
Как уже говорили другие, вам нужно работать с данными, которые подходит для вашего случая использования. Если вы не можете контролировать его источник, преобразуйте его. (отображение и / или сокращение), потому что я считаю, что ваша конечная цель - получить объект, который представляет каждый атрибут элемента. Поэтому я бы работал с таким игровым объектом, как:
let game_obj = {
item:
[
{name:"nothing", description:"none", game:"none", url:'#'},
{name:"potion", description:"small boost", game:"HP +10", url:'#'},
{name:"ether", description:"MP boost", game:"MP +10", url:'#'},
{name:"revive", description:"alive", game:"HP +100", url:'#'},
{name:"helmet", description:"protect head", game:"evd +3", url:'#'},
{name:"coins", description:"player coin", game:"coins +10", url:'#'},
{name:"medals", description:"luck plus", game:"luc +5", url:'#'},
{name:"crown", description:"strenght plus", game:"str +5", url:'#'},
{name:"robes", description:"strenght plus", game:"str +1", url:'#'},
]
};
, а затем выполнял поиск, как
for(obj of game_obj.item) {
if(obj.name.includes(itm) {
// found matching obj
}
}
Это проще понять с первого взгляда. Вот мое решение.
let game_obj =
{
item:
[
{name:"nothing", description:"none", game:"none", url:'#'},
{name:"potion", description:"small boost", game:"HP +10", url:'#'},
{name:"ether", description:"MP boost", game:"MP +10", url:'#'},
{name:"revive", description:"alive", game:"HP +100", url:'#'},
{name:"helmet", description:"protect head", game:"evd +3", url:'#'},
{name:"coins", description:"player coin", game:"coins +10", url:'#'},
{name:"medals", description:"luck plus", game:"luc +5", url:'#'},
{name:"crown", description:"strenght plus", game:"str +5", url:'#'},
{name:"robes", description:"strenght plus", game:"str +1", url:'#'},
]
};
/*----------------------------------------------------------------------------------------------------------------------------*/
var target;
var itemValue;
var list = document.getElementById('list'),
cout=document.getElementById('cout'),
submitBtn = document.getElementById('button'),
textBox = document.getElementById('input');
function item_obj(attributes, type='', exists=false) {
let {
name, description,game,url
}=attributes;
this.name = name;
this.description = description;
this.game = game;
this.url = url;
this.type = type;
this.exists = exists;
}
function getItemValue(itm) {
var gm_obj = game_obj.item,
i, values = [], foundvalue=null;
list.innerHTML = '';// gm_obj.join(', ');
console.log('getItemValue: testing:', itm);
for (var obj of gm_obj) {
let resultMsg=`${obj.name}: nope`,
span=document.createElement('span');
console.log({obj});
if(obj.name.includes(itm)) {
resultMsg=`found item: <b>${obj.name}</b>`;
cout.innerHTML = resultMsg;
span.className='found'
span.innerHTML=resultMsg;
list.appendChild(span);
return new item_obj(obj,'item',true);
}
span.innerHTML=resultMsg;
list.appendChild(span);
}
return false;
}
//itemValue = new item_obj(target, 'item', true);
submitBtn.onclick = function(event) {
target = textBox.value;
console.log({target});
cout.innerHTML = `searching for: ${target}... `;
window.setTimeout(()=>{
itemValue=getItemValue(target);
console.log(itemValue);
},1000);
}
@import url('https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap');
body {
margin: 20px;
background: #888;
font-family: 'Sulphur Point';
}
#list span {
flex-grow: 0;
white-space: no-wrap;
padding: 0 4px;
border: 1px solid #999;
border-radius: 3px;
font-size: 0.8em;
margin: 2px 5px;
color: #000;
background: #ccc;
}
#list span.found {
border:2px solid #090;
color:#080;background:#333
}
#input {
margin: 20px 20px 20px 0;
border:4px solid #365683;
}
#list {
flex-wrap: wrap;
margin-left: 20px;
display: flex;
border: 7px solid #654;
border-radius: 12px;
max-width: 200px;
background: #000;
width: 200px;
height: 165px;
padding-left: 10px;
color: #fff;
align-content: flex-start;
}
#button {
border: 4px solid #567;
border-radius: 4px;
}
#button:hover {
border: 4px solid #000;
color: #fff;
background: #000;
}
#button:active {
border: 4px solid #000;
color: #000;
background: #fff;
font-weigth: bold;
}
#out {
display:flex;
font-family: 'Sulphur Point';
color: #fff;
border: 7px solid #654;
border-radius: 12px;
font-weight: bold;
font-size: 20px;
background: #000;
max-width: 200px;
height: 60px;
padding: 20px;
}
.column div,.column button,.column input {
display:inline-flex;
}
container {
display:flex;
align-items:middle;
}
.column {
flex-grow:0 1;
}
<container>
<div class="column">
<input type="text" id="input"></input>
<button id="button">submit</button>
<div id="out">
<span id="cout"></span>
</div>
</div>
<div class="column" id="list"></div>
</container>