Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically add new tables and rows querying XML source with Javascript and PHP

I am programming a webservice that queries different databases for prices. The web service writes a new <Result> node into the XML page that is given back when calling http://service.com/xml.php?search=carpet as soon as it has results from the database. Unfortunately the queries sent to the various databases take extremely long (up to 30 seconds total). Obviously I dont want the user to wait for 30 seconds, then give back the XML and build a table with this data; I want it to dynamically load.

Let's assume a user searches for "Carpet", the databases will give back multiple products such as "Red Carpet" and "Yellow Carpet". "Red Carpet" has two Distributors that are dynamically loaded into the table of "Red Carpet". "Yellow Carpet" only has one distributor.

I need a price comparison Table like the one shown in the below picture that dynamically adds a new table if a new article is given back and that adds a new line to the table if a new distributor is found for a product.

Do you have suggestions on how to accomplish this? How do I receive only the data that has changed from my xml.php?

Price Comparison Table Structure

price comparison table structure

XML Data

<?xml version="1.0" encoding="UTF-8"?>
<Results>
<!--Given back within 5 seconds-->
<Result>
    <ArticleNumber>Red Carpet</ArticleNumber>
    <Manufacturer>Big Carpet Inc</Manufacturer>
    <Distributor>Amazonas</Distributor>
    <Prices>
        <Pricebreak>
            <Quantity>1</Quantity>
            <Price>$ 1.20</Price>
        </Pricebreak>
        <Pricebreak>
            <Quantity>10</Quantity>
            <Price>$ 1.00</Price>
        </Pricebreak>
        <Pricebreak>
            <Quantity>100</Quantity>
            <Price>$ 0.50</Price>
        </Pricebreak>
    </Prices>
</Result>
<!--Given back within another 10 seconds-->
<Result>
    <ArticleNumber>Red Carpet</ArticleNumber>
    <Manufacturer>Big Carpet Inc</Manufacturer>
    <Distributor>Veritas</Distributor>
    <Prices>
        <Pricebreak>
            <Quantity>1</Quantity>
            <Price>$ 0.90</Price>
        </Pricebreak>
        <Pricebreak>
            <Quantity>5</Quantity>
            <Price>$ 0.70</Price>
        </Pricebreak>
    </Prices>
</Result>
<!--Given back within another 5 seconds-->
<Result>
    <ArticleNumber>Yellow Carpet</ArticleNumber>
    <Manufacturer>Smallrug Corporation</Manufacturer>
    <Distributor>Veritas</Distributor>
    <Prices>
        <Pricebreak>
            <Quantity>1</Quantity>
            <Price>$ 3.90</Price>
        </Pricebreak>
        <Pricebreak>
            <Quantity>10</Quantity>
            <Price>$ 2.70</Price>
        </Pricebreak>
    </Prices>
</Result>
</Results>
like image 314
Dominik Avatar asked May 14 '11 21:05

Dominik


People also ask

How to insert a dynamic row in a table using JavaScript?

Code language:JavaScript(javascript) For adding dynamic row in table, we have used insertRow()method. This method will insert a row at position specified by the index arguement. Also for removing row, we have used deleteRow()method. Note that for inserting dynamic row, we have to created cells by using row.insertCell()method.

How do I add a table row to an XML file?

Select the data in the XML document using getElementsByTagName . Call a new function named addTableRowsFromXmlDoc (), which will accept the XML data and the element where results should be output as parameters. Write the addTableRowsFromXmlDoc () function as follows.

How to add table rows dynamically in Android layout Trayvon�?

This example demonstrates how to add table rows Dynamically in Android Layout. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main.xml. Step 3 − Add the following code to src/MainActivity.java. Step 4 ...

How do I get XML data from a table using Ajax?

After the page loads, use JavaScript to run a function called buildTable (), which in turn will run a function to populate the table rows. Write the getRows () function to retreive the XML data using AJAX. If the request succeeds, run a function called showResult ().


2 Answers

...actually the queries are not to an sql data source but to drivers that get information out of html websites...

If this is the case, then I suggest that you do not do this when your web page is called. But rather have some other script running as a cron task or service that polls this data periodically depending on how volatile the data is. Once every 5 minutes, or every hour, every day? And have that populate your local database which you can poll with much greater speed. This will allow you load any data you wish as the user selects it without waiting for the parser.

Effectively add a caching layer to your web service so that you can have your app run quickly, and not have to rely on an on-demand parsing of data.

Additionally, you could have the 'update' happen manually when you know that data has been updated if an automatic process isn't available.

like image 143
Broote Avatar answered Sep 28 '22 14:09

Broote


Supposing that you can't modify any structure and upgrade performance of the data retrieving, I think the only solution, is to cache result and try to make a copy of the db in a local db.

An Asynchronous mode I think you are on a best way.

You can develop a script that copy the slow querying, in the local db, that can be accessed fastest by the Front-end application, and apply this script at Cron Job, also if you can handle updated records, you are on the crest of a wave ;)

I think this could help

like image 43
Massimo Avatar answered Sep 28 '22 16:09

Massimo