简体   繁体   中英

Check search input if value matches in array and show respons

First of all, I am really new to Javascript and has just started the last weeks.

What i want:

A searchbar where a user can type their postcode and then the script searches through array to see if postnumber is in either of the objects - then responding the message found in the object it is located in.

I get it to respond the the message - but only for the first postnumber. I guess the problem is within the loop.

 var montering = { "postnummer": [{ "id": "0", "codes": ["3089", "2089"], "msg": "Message 1" }, { "id": "1", "codes": ["3088", "2088"], "msg": "Message 2" }] } var placeholder = ""; document.getElementById('melding').innerHTML = placeholder; //Script to search array for a match document.getElementById("searchBtn").addEventListener('click', function() { var formInput = document.getElementById("formInput").value, foundItem = null; //we'll store the matching value here if (formInput === '') { alert('Tast inn et postnummer'); return false; } for (i = 0; i < montering.postnummer.length; i++) { if (montering.postnummer[i].codes[i] == formInput) { foundItem = montering.postnummer[i].codes[i]; break; //we've found a match, no sense to continue } } if (foundItem) { var msg = document.getElementById('melding'); melding.innerHTML += 'Melding: ' + montering.postnummer[i].msg; } else { alert("Code Number: '" + formInput + "' Was Not Found"); } });
 <form method="get" action="input"> <fieldset> <input id="formInput" name="formInput" type="text" placeholder="Tast inn postnummeret ditt" required/> </fieldset> </form> <input id="searchBtn" type="submit" value="Finn pris"> <p id="melding">Placeholder</p>

use Array.prototype.includes on codes :

 var montering = { "postnummer": [{ "id": "0", "codes": ["3089", "2089"], "msg": "Message 1" }, { "id": "1", "codes": ["3088", "2088"], "msg": "Message 2" }] } var placeholder = ""; document.getElementById('melding').innerHTML = placeholder; //Script to search array for a match document.getElementById("searchBtn").addEventListener('click', function() { var formInput = document.getElementById("formInput").value, foundItem = null; //we'll store the matching value here if (formInput === '') { alert('Tast inn et postnummer'); return false; } for (i = 0; i < montering.postnummer.length; i++) { if (montering.postnummer[i].codes.includes(formInput)) { // change this line foundItem = montering.postnummer[i].codes[i]; break; //we've found a match, no sense to continue } } if (foundItem) { var msg = document.getElementById('melding'); melding.innerHTML += 'Melding: ' + montering.postnummer[i].msg; } else { alert("Code Number: '" + formInput + "' Was Not Found"); } });
 <form method="get" action="input"> <fieldset> <input id="formInput" name="formInput" type="text" placeholder="Tast inn postnummeret ditt" required/> </fieldset> </form> <input id="searchBtn" type="submit" value="Finn pris"> <p id="melding">Placeholder</p>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM