Databases
StackOverflow2013
Postsdbo
POjquery - How to get xml data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery - How to get xml data
    text
    copied!<p>Im a total noob to html, css, javascript, and programming altogether. Please bear with me.</p> <p>Im trying to populate my table using jquery. The data will be coming from an xml file.</p> <p><b><code>football_player.xml</code>:</b></p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;football_player&gt; &lt;name&gt;Cristiano Ronaldo&lt;/name&gt; &lt;club&gt;Real Madrid&lt;/club&gt; &lt;number&gt;7&lt;/number&gt; &lt;country&gt;Portugal &lt;/country&gt; &lt;name&gt;Fernando Torres &lt;/name&gt; &lt;club&gt;Chelsea &lt;/club&gt; &lt;number&gt;9&lt;/number&gt; &lt;country&gt;Spain&lt;/country&gt; &lt;name&gt;Iker Casillas&lt;/name&gt; &lt;club&gt;Real Madrid &lt;/club&gt; &lt;number&gt;1&lt;/number&gt; &lt;country&gt;Spain&lt;/country&gt; &lt;name&gt;David Beckham&lt;/name&gt; &lt;club&gt;Los Angeles Galaxy&lt;/club&gt; &lt;number&gt;23&lt;/number&gt; &lt;country&gt;England&lt;/country&gt; &lt;/football_player&gt; </code></pre> <p>My html table:</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Club&lt;/th&gt; &lt;th&gt;Number&lt;/th&gt; &lt;th&gt;Country&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/tfoot&gt; &lt;/tfoot&gt; &lt;/table&gt; </code></pre> <p>My javascript/jquery script:</p> <pre><code>$(document).ready(function () { $.ajax({ type: "GET", url: "football_player.xml", dataType: "xml", success: function(xml) { $(xml).find("football_player").each(function () { $("table tbody").append("&lt;tr&gt;"); $("table tbody").append("&lt;td&gt;" + $(this).find("name").text() + "&lt;/td&gt;"); $("table tbody").append("&lt;td&gt;" + $(this).find("club").text() + "&lt;/td&gt;"); $("table tbody").append("&lt;td&gt;" + $(this).find("number").text() + "&lt;/td&gt;"); $("table tbody").append("&lt;td&gt;" + $(this).find("country").text() + "&lt;/td&gt;"); $("table tbody").append("&lt;/tr&gt;"); }); } }); }); </code></pre> <p>I swear Im really a noob. I don't have any idea of what Im doing. Please help. I really want to learn. Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload