Is there a way to insert the information i get from the API to MYSQL? i been looking everywhere and can't find nothing about it, google,youtube.... i'm going crazy. This is my code to fetch the data from the api.
from this code i get a ranking with Position, Name, Highscore.
NOTE: I'm not asking for someone to take time out of his day and make me the code, i'm simply asking for directions or a website that teaches you how to do it. THANK YOU IN ADVANCE.
getData();
async function getData() {
const response = await fetch('http://localhost:3008/api/highscore/players')
console.log(response);
const data = await response.json();
const req = await fetch('http://localhost:3008/api/players')
console.log(req);
const info = await req.json();
length = data.players.length;
console.log(data);
var temp = "";
for (i = 0; i < length; i++)
for (j = 0; j < length; j++) {
{
if (info.players[i].id == data.players[j].id) {
temp += "<tr>";
temp += "<td>" + data.players[j].position + "</td>";
temp += '<td>' + info.players[i].name + '</td>'
temp += "<td>" + data.players[j].score + "</td>";
temp += "</tr>";
}
}
}
document.getElementById("data").innerHTML = temp;
}
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("data");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}```
Looking at your code, I can see that it runs in a web browser, so it is a front end code that runs as a client.
First you need back-end code that runs on server side to connect to a MySQL server and run SQL queries. You can use node.js, PHP, Java etc. for this.
Usually, there would be APIs that also run on server side. The purpose of the API is to bridge between clients (web browsers, mobile apps etc.) and the back-end code that perform database queries.
After you have back-end and APIs, then in your front end code (like the one you included in the question), you would call an API endpoint (for example, http://localhost/api/insertTopScorer) and provide the required parameters, when you want to insert new data to database, or read data from database.
You can also learn more details here Can JavaScript connect with MySQL?
Related
I'm wondering how website like this one : https://ping.eu/ping/ manage to make our ip ping an other ip and get the result.
Someone have an idea ?
Thanks
It Doesn't. A PHP script(on the server) will most likely do it with "PHP Sockets". Have a look at
this: https://www.php.net/manual/en/sockets.examples.php
Else it could use exec() function, but that would be a security flaw.
So to answer your question: The website will ping the IP address not the 'client'
If you want to ping a server, i.e. an actual web address/URL like www.google.com, you can look at this JSFiddle http://jsfiddle.net/GSSCD/203/ or GitHub repository https://github.com/jdfreder/pingjs.
Here's some code from the JSFiddle:
function Pinger_ping(ip, callback) {
if(!this.inUse) {
this.inUse = true;
this.callback = callback
this.ip = ip;
var _that = this;
this.img = new Image();
this.img.onload = function() {_that.good();};
this.img.onerror = function() {_that.good();};
this.start = new Date().getTime();
this.img.src = "http://" + ip;
this.timer = setTimeout(function() { _that.bad();}, 1500);
}
}
Another way to ping a server/web address is to use JavaScript and the XMLHttpRequest() function it supports:
HTML:
<div id="result"></div>
JavaScript:
function http_ping(fqdn) {
var NB_ITERATIONS = 4; // number of loop iterations
var MAX_ITERATIONS = 5; // beware: the number of simultaneous XMLHttpRequest is limited by the browser!
var TIME_PERIOD = 1000; // 1000 ms between each ping
var i = 0;
var over_flag = 0;
var time_cumul = 0;
var REQUEST_TIMEOUT = 9000;
var TIMEOUT_ERROR = 0;
document.getElementById('result').innerHTML = "HTTP ping for " + fqdn + "</br>";
var ping_loop = setInterval(function() {
// let's change non-existent URL each time to avoid possible side effect with web proxy-cache software on the line
url = "http://" + fqdn + "/a30Fkezt_77" + Math.random().toString(36).substring(7);
if (i < MAX_ITERATIONS) {
var ping = new XMLHttpRequest();
i++;
ping.seq = i;
over_flag++;
ping.date1 = Date.now();
ping.timeout = REQUEST_TIMEOUT; // it could happen that the request takes a very long time
ping.onreadystatechange = function() { // the request has returned something, let's log it (starting after the first one)
if (ping.readyState == 4 && TIMEOUT_ERROR == 0) {
over_flag--;
if (ping.seq > 1) {
delta_time = Date.now() - ping.date1;
time_cumul += delta_time;
document.getElementById('result').innerHTML += "</br>http_seq=" + (ping.seq-1) + " time=" + delta_time + " ms</br>";
}
}
}
ping.ontimeout = function() {
TIMEOUT_ERROR = 1;
}
ping.open("GET", url, true);
ping.send();
}
if ((i > NB_ITERATIONS) && (over_flag < 1)) { // all requests are passed and have returned
clearInterval(ping_loop);
var avg_time = Math.round(time_cumul / (i - 1));
document.getElementById('result').innerHTML += "</br> Average ping latency on " + (i-1) + " iterations: " + avg_time + "ms </br>";
}
if (TIMEOUT_ERROR == 1) { // timeout: data cannot be accurate
clearInterval(ping_loop);
document.getElementById('result').innerHTML += "<br/> THERE WAS A TIMEOUT ERROR <br/>";
return;
}
}, TIME_PERIOD);
}
But, of course, these are web addresses, not IP addresses, so I'm not sure if that's what you're aiming for. I'm also not sure if you're looking for the amount of time spent to get the connection and the number of packets and bytes sent and received, or if you just want to validate the connection. The above code does all of those things. For IP addresses, you can try an AJAX request to ping a server, which only sees if there is a connection using YOUR SERVER'S IP address, NOT THE USER'S CLIENT, like this:
client --AJAX-- yourserver --ICMP ping-- targetservers
You could also try:
Using a Java applet with isReachable
Writing a server-side script which pings, and using AJAX to communicate to your server-side script
You might also be able to ping in Flash (using ActionScript)
One last hypothetical and unorthodox way to get an IP address is to inspect and view the source of the website you mentioned and copy some code, mostly JavaScript, and test it on your end and try to implement it.
I have a problem figuring out how to add the json file to the website so it can update automatically.
The only way I have worked this was copy+pasting the code into a variable itself
function CreateTableFromJSON() {
var bannedPlayers = [{
"uuid": "-",
"name": "foobar",
"created": "2019-04-01 13:37:52 -0700",
"source": "-",
"expires": "forever",
"reason": "Banned by an operator."
} //theres more than this
]
var col = [];
for (var i = 0; i < bannedPlayers.length; i++) {
for (var key in bannedPlayers[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < bannedPlayers.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = bannedPlayers[i][col[j]];
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
</body>
The problem is obviously, I do not want to nor does my other operators want to copy and paste everysingle time we ban someone (and the fact that i grabbed most of the code above from the internet-im a noob#html)! Another way i have tried to solve this is harder to explain, but is to change the whole json file itself
function load() {
var mydata = JSON.parse(data);
var div = document.getElementById('data');
for (var i = 0; i < mydata.length; i++) {
div.innerHTML = div.innerHTML + "<p id=" + i + ">" + mydata[i].name + "</p>" + "<br>";
}
}
<script type="text/javascript" src="abc.json"></script>
<body onload="load()">
<div id="data">
</div>
</body>
This is the abc.json file (stand-in for banned-players.json for now)
data = '[{"uuid": "redacted", "name": "foobar", "created": "2019-04-01 13:37:52 -0700", "source": "operateor", "expires": "forever", "reason": "Banned by an operator." }]'
// theres more than that bracket
The problem with this is that it only shows the one column that i choose, and i dont know how to organize it in a table.
My question: is there a way i can not tamper with the json file itself while it hopefully automatically updates on my html page?? Thanks!
First of all, I would suggest you to use a plugin to manage your punishments (bans, kicks, mutes, ...) which stores the data in a database. Then you are able to query these information with e.g. PHP using e.g. mysqli.
When you don't want/can use a plugin to manage this and have to read the information from the banned-players.json, you need to manage to get the information from the file to the website.
To achieve this, you have to ask yourself the question: Is the banned-players.json file stored on the same machine, where the website is running?
If so, you only need to give the webserver access to read the file and actually read the file using some server side code (you can use e.g. PHP for this).
The webserver is mostly running with the user called www-data. Use the chmod or chown command to give the user access to the file. E.g. chmod 774 banned-players.json will cause that every user on your machine can read the file, and only selected users can write to the file.
Once you have done this, you can read the input of the file using e.g. PHP and print the output in your JavaScript code.
You can use this code, to read the file:
<?php
$filePath = "/path/to/file/banned-players.json";
$myfile = fopen($filePath, "r") or die("Unable to open file!");
$data fread($myfile, filesize($filePath));
fclose($myfile);
echo $data;
?>
Note, that the PHP code will be executed on server side, before the page is displayed in the users browser!
Using this, your Javascript code could look like this:
function CreateTableFromJSON() {
var bannedPlayers =
<?php
$filePath = "/path/to/file/banned-players.json";
$myfile = fopen($filePath, "r") or die("Unable to open file!");
$data = fread($myfile, filesize($filePath));
fclose($myfile);
str_replace("data = '", "", $data);
str_replace("'", "", $data);
echo $data;
?>
var col = [];
for (var i = 0; i < bannedPlayers.length; i++) {
for (var key in bannedPlayers[i]) {
...
...
...
If the file is not stored on the same machine, you need to manage to synchronize the file with the other machine, or create a webservice, or any other kind of service, which provides the information from the file for the other machine.
I've scavenged the inter web for answers and though I found some, they were mostly incomplete or not working.
What I'm trying to do is: I have a info page which displays information about a customer or server (or something else), this information is displayed in a table, sometimes multiple tables (I sometimes create my own table for some of the data and use Html.Grid(Model.list) to create tables for the rest of the data stored in lists, all on 1 page).
I found this website which is an awesome: http://www.excelmashup.com/ and does exactly what I want for 1 table, though I need this for multiple tables (they must all be in the same Excel file). I know I can create multiple files (1 for each table) but this is not the desired output.
So I kept on searching and I found a post on stackoverflow: Export multiple HTML tables to Excel with JavaScript function
This seemed promising so I tried using it but the code had some minor errors which I tried to fix:
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
window.location.href = uri + base64(format(template, ctx))
}
})()
The button I use to trigger it:
<input type="button" onclick="tableToExcel('InformatieTable', 'W3C Example Table')" value="Export to Excel">
but alas to no avail (I did not know what to do with the if (!table.nodeType) table = table line so I just commented it since it seemed to do nothing special).
Now I get an error, or well not really an error but this is what it says when I try to run this code:
Resource interpreted as Document but transferred with MIME type application/vnd.ms-excel: "data:application/vnd.ms-excel;base64,PGh0bWwgeG1sbnM6bz0idXJuOnNjaGVtYXMtbW…JzZXQ9VVRGLTgiLz48L2hlYWQ+PGJvZHk+PHRhYmxlPjwvdGFibGU+PC9ib2R5PjwvaHRtbD4=".
And I get an Excel file as download in my browser but when I try to open it I get an error about the content and file extension not matching and if I would still like to open it. So if I click ok it opens a empty Excel sheet and that's it.
I am currently trying to fix that error, though i don't think it will make any difference to the content of the Excel file.
Is there anyone that can help me fix this? Or provide an other way of doing this?
I do prefer it to be run client side (so jQuery/java) instead of server side to minimize server load.
EDIT
I've found a better example of the jQuery (one that does work) on http://www.codeproject.com/Tips/755203/Export-HTML-table-to-Excel-With-CSS
This converts 1 table into an excel file which is obviously not good enough. But now I have the code to do this so I should be able to adapt it to loop trough all tables on the web page.
Also updated the code in this example to the correct version I'm using now.
I also still get the same error yet when I click on ok when trying to open the Excel file it does show me the content of the table, so I'm just ignoring that for now. anyone who has a solution for this please share.
Thanks to #Axel Richter I got my answer, he reffered me to the following question
I have adapted the code a bit so it would Take all the tables on the web page so it now looks like this:
<script type="text/javascript">
var tablesToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
+ '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
+ '<Styles>'
+ '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
+ '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
+ '</Styles>'
+ '{worksheets}</Workbook>'
, tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
, tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (wsnames, wbname, appname) {
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
var tables = $('table');
for (var i = 0; i < tables.length; i++) {
for (var j = 0; j < tables[i].rows.length; j++) {
rowsXML += '<Row>'
for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
ctx = {
attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : ''
, nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String'
, data: (dataFormula) ? '' : dataValue.replace('<br>', '')
, attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
};
rowsXML += format(tmplCellXML, ctx);
}
rowsXML += '</Row>'
}
ctx = { rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i };
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
}
ctx = { created: (new Date()).getTime(), worksheets: worksheetsXML };
workbookXML = format(tmplWorkbookXML, ctx);
console.log(workbookXML);
var link = document.createElement("A");
link.href = uri + base64(workbookXML);
link.download = wbname || 'Workbook.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
})();
</script>
so now when ever I want a page to have an option to be exported to excel i add a refference to that script and i add the following button to my page:
<button onclick="tablesToExcel(['ServerInformatie', 'Relaties'], 'VirtueleMachineInfo.xls', 'Excel')">Export to Excel</button>
so the method:
tablesToExcel(WorksheetNames, fileName, 'Excel')
Where worksheetNames is an array which needs to contain as much names (or more) as there are tables on the page. You could ofcourse chose to create the worksheet names in a different way.
And where fileName is ofcourse the name of the file you'll be downloading.
Not having it all in 1 worksheet is a shame but at least this will do for now.
Here is the code that I used to put multiple HTML tables in the same Excel sheet:
import TableExport from 'tableexport';
const tbOptions = {
formats: ["xlsx"], // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
bootstrap: true, // (Boolean), style buttons using bootstrap, (default: true)
exportButtons: false, // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
position: "bottom", // (top, bottom), position of the caption element relative to table, (default: 'bottom')
}
DowlandExcel = (key) => {
const table = TableExport(document.getElementById(key), tbOptions);
var exportData = table.getExportData();
var xlsxData = exportData[key].xlsx;
console.log(xlsxData); // Replace with the kind of file you want from the exportData
table.export2file(xlsxData.data, xlsxData.mimeType, xlsxData.filename, xlsxData.fileExtension, xlsxData.merges, xlsxData.RTL, xlsxData.sheetname)
}
DowlandExcelMultiTable = (keys) => {
const tables = []
const xlsxDatas = []
keys.forEach(key => {
const selector = document.getElementById(key);
if (selector) {
const table = TableExport(selector, tbOptions);
tables.push(table);
xlsxDatas.push(table.getExportData()[key].xlsx)
}
});
const mergeXlsxData = {
RTL: false,
data: [],
fileExtension: ".xlsx",
filename: 'rapor',
merges: [],
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
sheetname: "Rapor"
}
for (let i = 0; i < xlsxDatas.length; i++) {
const xlsxData = xlsxDatas[i];
mergeXlsxData.data.push(...xlsxData.data)
xlsxData.merges = xlsxData.merges.map(merge => {
const diff = mergeXlsxData.data.length - xlsxData.data.length;
merge.e.r += diff;
merge.s.r += diff;
return merge
});
mergeXlsxData.merges.push(...xlsxData.merges)
mergeXlsxData.data.push([null]);
}
console.log(mergeXlsxData);
tables[0].export2file(mergeXlsxData.data, mergeXlsxData.mimeType, mergeXlsxData.filename, mergeXlsxData.fileExtension, mergeXlsxData.merges, mergeXlsxData.RTL, mergeXlsxData.sheetname)
}
So I am currently building an activity feed/news feed or sorts using JSON and jQuery (and of course PHP). Everything works really well, especially fetching new results. The only issue is the first load - and I'm wondering if there is some way to sort of preload the results to make it more slick?
jQuery code below:
for (var j = 0; j < jsonData.items.length; j++) {
var entryData = jsonData.items[j];
var entry = template.clone();
entry.removeClass("template");
entry.find(".message").text(entryData.statusid);
entry.find(".actName").text(entryData.name);
entry.find(".actContent").text(entryData.content);
//get the users ProfilePic
var profileImg = $("<img />");
profileImg.attr("src", "./img/" +entryData.profilePic);
profileImg.addClass("feed-user-img");
entry.find(".actProfilePic").append(profileImg);
//Get user-uploaded images.
entry.find(".actImage").text(entryData.imageKey);
if (entryData.imageKey != "")
{
var img = $("<img />"); // Create the image element
img.attr("src", "http://spartadev.s3.amazonaws.com/" + entryData.imageKey); // Set src to the s3 url plus the imageKey
entry.find(".actImage").append(img); // Append it to the element where it's supposed to be
}
spot.prepend(entry);
spot.find(".entry").first().hide().slideDown();
}
I've got a couple of questions regarding the Sqlite implementations for HTML5 website.
First of all, I'm trying to use the Synchronous Database calling openDatabaseSync method, but it doesn't seem to work... Someone used it already and could help me ?
Also, I'm struggling a bit trying to process the result return by my database query. I'd like my function to return an array of book, like this :
function searchByKeywordId(kw_id, element) {
cleanSearch();
element.innerHTML = "No result...";
var books = new Array();
db.transaction(function (tx) {
tx.executeSql("SELECT b.BK_TITLE,b.BK_URL, b.BK_THUMBNAIL_URL FROM KEYWORDS k INNER JOIN CATALOG_ITEMS c on k.KW_ID = c.KW_ID INNER JOIN BOOKS b on c.BK_ID = b.BK_ID WHERE k.KW_ID = ? GROUP BY b.BK_TITLE,b.BK_URL",[kw_id], function (tx, results) {
if (results.rows.length > 0) {
var html = "";
for (var i = 0; i < results.rows.length; i++) {
var bookId = results.rows.item(i).BK_ID;
var bookUrl = results.rows.item(i).BK_URL;
var bookTitle = results.rows.item(i).BK_TITLE;
var bookThumbnailUrl = results.rows.item(i).BK_THUMBNAIL_URL;
var book = new Book(bookId,bookTitle,bookUrl,bookThumbnailUrl);
books.push(book);
/*html += "<div class='x_container' id='calibre:book:" + bookId + "'>";
html += "<div class='cover'>";
html += "</div></div>";*/
html += "<a href='" + bookUrl + "' title=\"" + bookTitle + "\" target='_new'><img src='" + bookThumbnailUrl + "'></a> ";
}
//html += "</div>";
element.innerHTML = html;
}
});
});
return books; }
obviously, adding books within the callback methods doesn't work ... Do you see a way I could achieve that ? So that I would not have to write in the document from my database methods ...
Thanks !
On stackoverflow a question with javascript and "doesn't work" in it is usually a missing paren :) However I didn't find one in your code. I see some suspicious looking syntax around
,[kw_id], << did we really mean an array here, or are we de-referencing something...
In any case if that's not a mistake I would start by simplifying things, and not multipurposing your functions.
function searchByKeywordId(kw_id, element) {
cleanSearch();
var books = new Array();
db.transaction(function (tx) {
tx.executeSql("SELECT b.BK_TITLE,b.BK_URL, b.BK_THUMBNAIL_URL FROM KEYWORDS k INNER JOIN CATALOG_ITEMS c on k.KW_ID = c.KW_ID INNER JOIN BOOKS b on c.BK_ID = b.BK_ID WHERE k.KW_ID = ? GROUP BY b.BK_TITLE,b.BK_URL",[kw_id], function (tx, results) {
if (results.rows.length > 0) {
var html = "";
for (var i = 0; i < results.rows.length; i++) {
var bookId = results.rows.item(i).BK_ID;
var bookUrl = results.rows.item(i).BK_URL;
var bookTitle = results.rows.item(i).BK_TITLE;
var bookThumbnailUrl = results.rows.item(i).BK_THUMBNAIL_URL;
var book = new Book(bookId,bookTitle,bookUrl,bookThumbnailUrl);
books.push(book);
} // end for loop
} // end if block
} // end execute callback
); // end executeSql call
} // end transaction function argument
); // end db.transaction call
return books;
}
Then somewhere that you called this function do something like this:
var html="";
for (i=0; i<books.length; i++) {
html += "<a href='" + books[i].url + "' title=\"" + books[i].title + "\" target='_new'><img src='" + books[i].thumbnailUrl + "'></a> ";
}
if (html == "") {
html = "No result...";
}
element.innerHTML = html; // consider using jQuery here for browser compatability reasons
This will simplify debugging your code in firebug or whatever and be more readable. Later IF you need the performance, you can try to recombine and use the existing loop as an optimization... Premature optimization is usually a bad idea. Write clear code that works. Even if you know you should optimize it, get it working and then optimize it after it works (preferably after you've demonstrated that you do in fact need to optimize it).
http://www.flounder.com/optimization.htm