Hulp gezocht met de zoekmachine

Status
Niet open voor verdere reacties.

rominick

Gebruiker
Lid geworden
15 jun 2015
Berichten
28
Ik moet voor school een zoekmachine maken via javascript, alleen bij de friends tab staat er [object Object],[object Object],[object Object] in plaats van de namen.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zoeken</title>	
<style>
#search{ border-radius:4px; border: grey 1px solid; line-height:40px;font-size:20px;padding-left:10px;}

table#list tr:nth-child(even) {
    background-color: #eee;
}
table#list tr:nth-child(odd) {
    background-color: #fff;
}
table#list th {
    color: gold;
    background-color: navy;
}
html{
background: black;
} 
</style>
</head>

<body>		
<input type="text" id="search" placeholder="Zoeken..." disabled />
<br />
<br />
<br />
<table id="list" style="width:100%">
</table>
	<script src="main.js"></script>
</body>
</html>

[js]var getJSON = function(url, successHandler, errorHandler) {

var request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
successHandler(data);
} else {

errorHandler(request.statusText);
}
};

request.onerror = function() {

errorHandler(request.statusText);
};

request.send();

};

var jsondata;
var tableTop = "<tr>";
var listitems = "";

getJSON('http://codetuts.nl/json/list.php', function(data) {
document.getElementById('search').disabled = false;

jsondata = data;

document.getElementById("search").onkeyup = keyUp;
//table head aanmaken
for(var index in data[0]) {
tableTop += "<th>"+ index + "</th>";
}
tableTop += "</tr>";
//items inladen
for(var i = 0; i < jsondata.length; i++)
{
listitems += createList(jsondata);
}

list.innerHTML = tableTop + listitems;

}, function(err) {
console.error(err);
});

function keyUp(event){
listitems = "";
var val = search.value;

for(var i = 0; i < jsondata.length; i++)
{
//zoeken naar item
if(jsondata.name.search(val) != -1)
{
listitems += createList(jsondata);
}
}

list.innerHTML = tableTop + listitems;
}

function createList(data){
var list = "<tr>";
for(var index in data) {

list += "<td>"+ data[index] + "</td>";
}

list += "</tr>";

return list;
}[/js]

Wat is er mee aan de hand?
Wat ik wil zeggen is dat hij niet de vrienden wi laten zien, en omdat de leeraar zegt door te doen, maar als we hierin nooit les hebben gehad, ja.
 
Laatst bewerkt door een moderator:
Beste "rominick",

Welkom op Helpmij :)

Het kicken van een topic naar een uur en een kwartier is wel erg enthousiast ;) De gebruikers van Helpmij.nl zijn vrijwilligers en dus niet de hele dag online, mocht je na 24 uur nog geen reactie hebben dan zou je het topic een schopje kunnen geven :)

Met vriendelijke groet,

Stefan (Tha Devil)
Moderator Helpmij.nl



PS: Als je [object Object] terugkrijgt dan probeer je dus een object weer te geven, haal die variabele eens door console.log() om te kijken wat er precies in staat en hoe je die dan aan kunt roepen ;)
 
Waar moet ik de console.log() eigenlijk zetten, ik moest hem in eenscript tag zetten, maar dan heb ik <script>console.log(main.js)</script>.
 
Zoals je het nu hebt zet je hem om de verwijzing naar je Javascript-bestand, dat gaat niet werken :)

Er is ergens iets dat die [object Object] toont, ik vermoed deze regels:
[js]list += "<td>"+ data[index] + "</td>";[/js]

Als je boven die regel de console.log neer zet moet je de informatie in je console terug kunnen vinden:

Volledige createList functie met debugging:
[js]function createList(data){
var list = "<tr>";
for(var index in data) {
console.log(data[index]);
list += "<td>"+ data[index] + "</td>";
}

list += "</tr>";
return list;
}[/js]
 
Zo te zien is niet alle data een array met objecten, dus moeten we er een check bij in bouwen :)
http://stackoverflow.com/questions/4775722/check-if-object-is-array

Vervolgens moeten we de boel samenvoegen: http://stackoverflow.com/questions/16607557/javascript-perform-join-on-value-in-object-array
[js]function createList(data){
var list = "<tr>";
for(var index in data) {
if (data[index] instanceof Array) {
list += "<td>"+ data[index].map(function(elem){ return elem.name; }).join(", ") + "</td>";
} else {
list += "<td>"+ data[index] + "</td>";
}
}

list += "</tr>";
return list;
}
[/js]
 
Bedankt voor de reacties, hij doet het.
Heel erg bedankt, en er kan een slotje op.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan