parse output and style xml data

Question

I have xml located on a remote server with the following format:

<query_results>
    <row id="1">
        <distance>...</distance>
        <post_title>...</post_title>
        <post_excerpt>...</post_excerpt>
        <ID>...</ID>
    </row
    <row id="2">
    .........................etc
</query_results>

I need my javascript to go through each of these rows in a way so that I can append each to a div on my html document with a class for styling without the script caring too much what the individual names are for each element in each row. I have used Jquery's parse XML function, however i am lost after that. Anybody got a good idea how to do this? Any help is appreciated a lot.

yes, exactly. to append the data to html in side of a div (so that it can be styled) — james0
– james0, Commented Apr 23, 2014 at 20:15
im talking about putting text inside of a div for styling purposes. sorry if that wasn't clear. example: <div><p>stuff</p></div> — james0
– james0, Commented Apr 23, 2014 at 20:24

helderdarocha · Accepted Answer · 2014-04-23 23:59:59Z

I made a JSFiddle with a possible solution to your problem. It loads your sample XML from this Gist.

In the HTML there is a placeholder:

<div id="query_results"/>

You can load the file using JQuery ajax:

$.ajax({
    type: "GET",
    url: "/url/to/your/file.xml",
    dataType: "xml",
    success: parser
});

In the parser function you can use .find() and .children() to navigate the XML:

function parser(xml) {
    $(xml).find('query_results').children().each(function() {
        var row = $(this);
        var id  = row.attr("id");
        var rowContents = "";

        row.children().each(function() {
            var tag = $(this);
            var tagName = tag[0].tagName;
            rowContents += "<div class='"+tagName+"'>"+tag.text()+"</div>";
        });
        var newRow = "<div id='row"+id+"'>"+rowContents+"</div>";
        $("#query_results").append(newRow);
    }); 
}

I used the row IDs and names to create and ID for each row DIV, for example:

<div id="row1"> ... </div>

And then used the tag names inside each row as classes:

<div class="distance"> ... </div>
<div class="post_title"> ... </div>

The parser() function above builds the divs and adds them to the placeholder div. The final result will be:

<div id="query_results">
    <div id="row1">
        <div class="distance">...</div>
        <div class="post_title">...</div>
        <div class="post_excerpt">...</div>
        <div class="ID">...</div>
    </div>
    <div id="row2">...</div>
</div>

Then you can style the result in CSS using selectors such as:

#query_results div { ... }
#query_results div div { ... }
#row1 .distance { ... }
#row2 .ID { ... }

Collectives™ on Stack Overflow

parse output and style xml data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related