Simple lists from XML databases

When you have created your XML database, you have several ways of extracting data. The most simple one is havinf the content written as a list, e.g. in a table.

Displaying the entire content of a database, can seem a waste of time, because then you might as well have made the table, and saved making a file and a JavaScript, thereby making the page faster and easier to do. Some users, however, become completely paralyzed when having to use a search field. Looking through insanely long lists for whatever they are searching for, is preferable to having to make a choice regarding what to write in the search field, or they are not entirely sure what they are looking for, until they find it. Therefore it can be beneficial to offer the choice between searching in the database or showing the entire content, so the user can look through it all for whatever they may be searching for, on their own.

The XML file consists of a field for searching and a field for the content to be returned. It can easily be the same field, but usually you have a field value, e.g. a keyword, that you are searching for, and e.g. an explanation is returned. If we try making a list with ass icons as a model, the list could look like this:


The list is given the name Icons.xml, and is placed in the same directory as the HTML file with the JavaScript pulling the list.

When you have to do a simple list like this, the easiest and quickest solution is working with an internal script, using document.write(). If you want to construct your JavaScript in another way, for some reason, you are of course more than welcome to do so.

The JavaScript consists of three parts:

1. Accessing the XML file
2. Parsing the XML file's Icon and Explanation fields
3. Insertion of field values in a table

In this example, we create a table where we have the icon in the first cell and after that, a cell with the explanation.


The first thing we need to do, is accessing the XML file. For this we use the JavaScript loadXMLDoc(). How this is done, can be read here. So far, the JavaScript looks like this:


After this, we need to get ahold of the values from the two tags Icon and Explanation. This is done using getElementsByTagName():


To get the data into a table, we need to create a TABLE tag. Here we make it with border-collapse:collapse, so the cells are together. This is done using document.write(), and it looks like this (remember the end tag):


The table's content is also done using document.write(), where you build it using TR and TD tags. The list is parsed in its entire length, specified by Icon_lmnt.length, which looks like this:



For each post, it starts with a table row, TR, and in each cell, TD, the field values from Icon and Explanation are inserted, using the variables' firstChild.nodeValue. Here the cells have padding and borders specified, and the code now looks like this:



On the screen, the result looks like this: