Parse XML into a string using javascript or jquery

Question

I need to parse a XML into a string based on user's search input using Javascript or Jquery.

XML is located at rssfeed.ucoz.com/rssfeed.xml Too large to place here.

Example:

Original XML

<item>
    <title>Abyssal Warder fire</title>
    <guid isPermaLink="false">//lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg</guid>
    <media:description>Giant Destroyer</media:description> 
    <media:thumbnail url="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/s144/Abyssal%20Warder%20fire.jpg" />
    <media:group>
        <media:content url="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" />
        <media:content isDefault="true" width="685" height="295" url="http://rssfeed.ucoz.com/Battleforge.html" type="text/html" /> 
    </media:group> 
</item>

<item>
    <title>Abyssal Warder frost</title>
    <guid isPermaLink="false">//lh4.googleusercontent.com/_qvhVKLFln2A/TU-54ZuHv6I/AAAAAAAAEW8/gtPs25XUjhY/Abyssal%20Warder%20frost.jpg</guid>
    <media:description>Giant Destroyer</media:description> 
    <media:thumbnail url="http://lh4.googleusercontent.com/_qvhVKLFln2A/TU-54ZuHv6I/AAAAAAAAEW8/gtPs25XUjhY/s144/Abyssal%20Warder%20frost.jpg" />
    <media:group>
            <media:content url="http://lh4.googleusercontent.com/_qvhVKLFln2A/TU-54ZuHv6I/AAAAAAAAEW8/gtPs25XUjhY/Abyssal%20Warder%20frost.jpg" />
            <media:content isDefault="true" width="685" height="295" url="http://rssfeed.ucoz.com/Battleforge.html" type="text/html" /> 
    </media:group> 
</item>

Outcome as string when user search for "Abyssal Warder Fire" or just "Abyssal Fire"

<item>
    <title>Abyssal Warder fire</title>
    <guid isPermaLink="false">//lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg</guid>
    <media:description>Giant Destroyer</media:description> 
    <media:thumbnail url="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/s144/Abyssal%20Warder%20fire.jpg" />
    <media:group>
        <media:content url="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" />
        <media:content isDefault="true" width="685" height="295" url="http://rssfeed.ucoz.com/Battleforge.html" type="text/html" /> 
    </media:group> 
</item>

I've been searching for 5 days in the net, and I couldn't get anything. All the results I see are parsed xml that are shown as HTML, but none as string. I need it as string because I will feed the string it into a web application's api that requires it as a string. Please help, any ideas or code on how to accomplish this would be greatly appreciated. Thanks in advance.

Question isn't clear. You are loading this as ajax and passing to another service as-is? When you use the word "parse" it implies you want the XML to be read into a data structure. — jiggy
– jiggy, Commented Feb 14, 2011 at 21:54
Parsing XML in Javascript is too heavy to client-side. You should parse XML to obtain what you want using PHP (i.e. with an Ajax call). — Fran Verona
– Fran Verona, Commented Feb 14, 2011 at 22:06
@jiggy I'm not loading it as ajax but just as xml and passing it (including all the tags) as string to another service as-is. Is there a way to do it? — UrBestFriend
– UrBestFriend, Commented Feb 15, 2011 at 12:41

Fran Verona · Accepted Answer · 2011-02-16 17:01:17Z

EDIT: i forget to metion that I'm using JQuery

Here is my point of view:

function init(){
   $.ajax({
      type: "GET",
      url: "http://localhost/gis/hola.xml",    // this should be your XML url
      dataType: "text",
      success: parseXml    // your own callback function
   });
}

function parseXml(xml){
   xml = xml.replace(/\n/g,'');       // just to replace carry return
   var url = 'http://localhost/'+xml;
   alert(url);
}

Your xml file is:

<?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
  <Tutorial author="The Reddest">
    <Title>Silverlight and the Netflix API</Title>
  </Tutorial>
</RecentTutorials>

Then, your url variable should be (remember to convert '/' symbol to its specific ASCII character before sends it (http://www.asciitable.com/)):

http://localhost/<?xml version="1.0" encoding="utf-8" ?><RecentTutorials><Tutorial author="The Reddest"><Title>Silverlight and the Netflix API</Title></Tutorial></RecentTutorials>

url now have this value. If you try to show this var on a div:

Silverlight and the Netflix API

Because your browser doesn't skip < and > symbols.

Try to call your function like this:

function parseXml(xml){
   xml = xml.replace(/\n/g,'');       // just to replace carry return
   cooliris.embed.setFeedContents('XML parsed as string: '+xml) 
}

I hope it helps you. Happy codding!

Russki · Accepted Answer · 2011-02-14 22:15:15Z

0

If I understand your question correctly, sounds like all you need is to load that XML via XMLHttpRequest and then use XPath query to locate what you're looking for.

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://rssfeed.ucoz.com/rssfeed.xml ",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

answered Feb 14, 2011 at 22:15

Russki

393 bronze badges

@Fran Verona Hi, thanks for the replies. Unfortunately, I can't use php nor Ajax because the site is hosted for free - and thus the limitations.

UrBestFriend
– UrBestFriend

02/15/2011 02:34:39
Commented Feb 15, 2011 at 2:34
@user607323 Thanks for this. However, may I know where is the string stored into? I'm currently working with Cooliris API for Media RSS, it has cooliris.embed.setFeedContents(mediaRSS) where I simply replace mediaRSS with the queried string.

UrBestFriend
– UrBestFriend

02/15/2011 02:42:10
Commented Feb 15, 2011 at 2:42
@user607323 Ok, I let you here a few links about that switchonthecode.com/tutorials/xml-parsing-with-jquery hiteshagrawal.com/javascript/…

Fran Verona
– Fran Verona

02/15/2011 12:15:55
Commented Feb 15, 2011 at 12:15
@Fran Verona Thanks for the link. However, is there a way to place it as a string? Because I will feed the string to a web application. Here's what I need to achieve when the user search for Abyssal Fire: cooliris.embed.setFeedContents(' XML parsed as string: <item><title>Abyssal Warder fire</title> etc ' )

UrBestFriend
– UrBestFriend

02/16/2011 04:55:05
Commented Feb 16, 2011 at 4:55

Add a comment |

Collectives™ on Stack Overflow

Parse XML into a string using javascript or jquery

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related