XML To Table Converter With jQuery - FetchXML

XML To Table Converter With jQuery - FetchXML
File Size: 3.95 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The FetchXML jQuery script fetches data from a XML file via AJAX requests and parses/displayes the XML data in an HTML table.

How to use it:

1. Prepare your XML data.

<playlist>
  <movie id="tt0112384">
    <title>Apollo 13</title>
    <director>Ron Howard</director>
    <release-date>1995-06-30</release-date>
    <mpaa-rating>PG</mpaa-rating>
    <running-time>140</running-time>
    <genre>adventure</genre>
    <genre>drama</genre>
    <cast>
      <person name="Tom Hanks" role="Jim Lovell" />
      <person name="Bill Paxton" role="Fred Haise" />
      <person name="Kevin Bacon" role="Jack Swigert" />
      <person name="Gary Sinise" role="Ken Mattingly" />
      <person name="Ed Harris" role="Gene Kranz" />
    </cast>
    <imdb-info url="http://www.imdb.com/title/tt0112384/">
      <synopsis>
        NASA must devise a strategy to return Apollo 13 to Earth safely
        after the spacecraft undergoes massive internal damage putting
        the lives of the three astronauts on board in jeopardy.
      </synopsis>
      <score>7.6</score>
    </imdb-info>
  </movie>
  <movie id="tt0307479">
    <title>Solaris</title>
    <director>Steven Soderbergh</director>
    <release-date>2002-11-27</release-date>
    <mpaa-rating>PG-13</mpaa-rating>
    <running-time>99</running-time>
    <genre>drama</genre>
    <genre>mystery</genre>
    <genre>romance</genre>
    <cast>
      <person name="George Clooney" role="Chris Kelvin" />
      <person name="Natascha McElhone" role="Rheya" />
      <person name="Ulrich Tukur" role="Gibarian" />
    </cast>
    <imdb-info url="http://www.imdb.com/title/tt0307479/">
      <synopsis>
        A troubled psychologist is sent to investigate the crew of an
        isolated research station orbiting a bizarre planet.
      </synopsis>
      <score>6.2</score>
    </imdb-info>
  </movie>
  <movie id="tt1731141">
    <title>Ender's Game</title>
    <director>Gavin Hood</director>
    <release-date>2013-11-01</release-date>
    <mpaa-rating>PG-13</mpaa-rating>
    <running-time>114</running-time>
    <genre>action</genre>
    <genre>scifi</genre>
    <cast>
      <person name="Asa Butterfield" role="Ender Wiggin" />
      <person name="Harrison Ford" role="Colonel Graff" />
      <person name="Hailee Steinfeld" role="Petra Arkanian" />
    </cast>
    <imdb-info url="http://www.imdb.com/title/tt1731141/">
      <synopsis>
        Young Ender Wiggin is recruited by the International Military
        to lead the fight against the Formics, a genocidal alien race
        which nearly annihilated the human race in a previous invasion.
      </synopsis>
      <score>6.7</score>
    </imdb-info>
  </movie>
  <movie id="tt0816692">
    <title>Interstellar</title>
    <director>Christopher Nolan</director>
    <release-date>2014-11-07</release-date>
    <mpaa-rating>PG-13</mpaa-rating>
    <running-time>169</running-time>
    <genre>adventure</genre>
    <genre>drama</genre>
    <genre>scifi</genre>
    <cast>
      <person name="Matthew McConaughey" role="Cooper" />
      <person name="Anne Hathaway" role="Brand" />
      <person name="Jessica Chastain" role="Murph" />
      <person name="Michael Caine" role="Professor Brand" />
    </cast>
    <imdb-info url="http://www.imdb.com/title/tt0816692/">
      <synopsis>
        A team of explorers travel through a wormhole in space in an
        attempt to ensure humanity's survival.
      </synopsis>
      <score>8.6</score>
    </imdb-info>
  </movie>
  <movie id="tt3659388">
    <title>The Martian</title>
    <director>Ridley Scott</director>
    <release-date>2015-10-02</release-date>
    <mpaa-rating>PG-13</mpaa-rating>
    <running-time>144</running-time>
    <genre>adventure</genre>
    <genre>drama</genre>
    <genre>scifi</genre>
    <cast>
      <person name="Matt Damon" role="Mark Watney" />
      <person name="Jessica Chastain" role="Melissa Lewis" />
      <person name="Kristen Wiig" role="Annie Montrose" />
    </cast>
    <imdb-info url="http://www.imdb.com/title/tt3659388/">
      <synopsis>
        During a manned mission to Mars, Astronaut Mark Watney is
        presumed dead after a fierce storm and left behind by his crew.
        But Watney has survived and finds himself stranded and alone on
        the hostile planet. With only meager supplies, he must draw upon
        his ingenuity, wit and spirit to subsist and find a way to
        signal to Earth that he is alive.
      </synopsis>
      <score>8.1</score>
    </imdb-info>
  </movie>
</playlist>

2. Create an empty HTML table with predefined header cells.

<table id="table">
  <tr>
    <th>Title</th>
    <th>Genre (comma separated)</th>
    <th>Director</th>
    <th>Cast (comma separated)</th>
    <th>Short description</th>
    <th>IMDB-rating</th>
  </tr>
</table>

3. Load the necessary jQuery JavaScript library in the page.

<script src="/path/to/jquery.min.js"></script>

4. The main function to fetch and display the XML data in the table.

function ajaxLoading() {
  $.ajax({
    url: "movies.xml",
    dataType: "xml",
    success: function(data) {
      $(data)
        .find("movie")
        .each(function() {
          var genre = [],
            cast = [];
          $(this)
            .find("genre")
            .each(function() {
              genre.push($(this).text());
            });
          $(this)
            .find("cast")
            .find("person")
            .each(function() {
              cast.push($(this).attr("name"));
            });

          $("table").append(
            "<tr>" +
              "<td>" +
              $(this)
                .find("title")
                .text() +
              "</td>" +
              "<td>" +
              genre.join(", ") +
              "</td>" +
              "<td>" +
              $(this)
                .find("director")
                .text() +
              "</td>" +
              "<td>" +
              cast.join(", ") +
              "</td>" +
              "<td>" +
              $(this)
                .find("imdb-info")
                .find("synopsis")
                .text() +
              "</td>" +
              "<td>" +
              $(this)
                .find("imdb-info")
                .find("score")
                .text() +
              "</td>" +
              "</tr>"
          );
        });
    }
  });
}

This awesome jQuery plugin is developed by danielhuang1991. For more Advanced Usages, please check the demo page or visit the official website.