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.
[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.
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: