javascript xml reader

Question

I will keep this very short: I'm trying to make a loop through an xml-document for a gallery. I got a script that should work, but doesn't. Can anyone please tell me where I did wrong?

I didn't want to make this longer because the problem is simple and have been pondering over this since yesterday and this is the closest I get.

I want to loop through the xml-file and print out "path" and "file" first and most. I'm building a gallery and thought that the best way to save all the data for the images was an xml-file, but now I can't get it to loop correctly. In the script I made the page print out both x and i, which resulted with x being 1 and i being 0, hence it hasn't worked through the for-loop at all as I see it.

Any help would be appreciated, because I'm stuck. Been trying so many solutions that my head is spinning and I can't get any further without a nudge in the right direction.

The html/javascript:

        <script type="text/javascript">
            function displayResult()
            {
                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","../gallery/gallery.xml",false);
                xmlhttp.send();
                xmlDoc=xmlhttp.responseXML;


                x=xmlDoc.getElementsByTagName("session");
                for (i=0;i<x.length;i++)
                { 
                    img = "<img src='";
                    path = (x[0].getElementsByTagName("path")[0].childNodes[0].nodeValue);
                    file = (x[i].getElementsByTagName("file")[i].childNodes[0].nodeValue);
                    end = "' /><br />";
                    name = (x[i].getElementsByTagName("name")[i].childNodes[0].nodeValue);
                    txt = "x:" + x.length + "| i " + i + "<br />" + img + path + file + end + name + "<br />";
                    document.getElementById("content").innerHTML = txt;
                    //document.write(txt);
                }
            }
        </script>
    </head>
    <body onload="displayResult()">
        <div id='content'></div>
    </body>
</html>

xml-file:

<gallery>
    <session>
        <path>../gallery/beauty/</path>
        <item>
            <file>_DSC2331.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_DSC2339.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_DSC2350.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
</gallery>

This is a bit too short. Could you give any more direction? maybe any errors or weird behavior? it's unlikely you will get a lot of attention saying, "fix my code". What does this do? — Derek Adair
– Derek Adair, Commented Sep 9, 2011 at 21:12
You'll have to tell us how it's not working. Does the XHR not work? Do the getElementsByTagName searches not work? Does the content update not work? — Paul Grime
– Paul Grime, Commented Sep 9, 2011 at 21:14
Recently updated so you perhaps get a better idea of what I'm trying to do. Sorry for being a bit short in explanation. — Richard Atterfalk
– Richard Atterfalk, Commented Sep 9, 2011 at 21:22

Paul Grime · Accepted Answer · 2011-09-09 23:29:13Z

If I can make some suggestions:

Use the var keyword within functions to make those variables local to that function. The code you have at the moment would set values in the global namespace, which is often considered bad practice (e.g. you could overwrite other people's variables, or other people could overwrite yours). Also declare your variables at the start of a function, as they will be hoisted there anyway.
Split your code up into more meaningful functions. This way they become easier to read and often then become more reusable.
Make sure you loop through items as well as sessions.
Consider using a Javascript framework like jQuery. They can often simplify the code you have to write, and you will usually end up writing less code yourself.

.

<html>
    <head>
        <script type="text/javascript">
            function loadDoc(url) {
                var xmlhttp = null;
                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", url, false);
                xmlhttp.send();
                return xmlhttp.responseXML;
            }

            function getContent(sessions) {
                var items = null,
                    i = 0,
                    j = 0,
                    img = "",
                    path = "",
                    file = "",
                    end = "",
                    name = "",
                    txt = "";
                for (i = 0; i < sessions.length; i++) { 
                    items = sessions[i].getElementsByTagName("item");
                    path = sessions[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
                    for (j = 0; j < items.length; j++) {
                        img = "<img src='";
                        file = items[j].getElementsByTagName("file")[0].childNodes[0].nodeValue;
                        end = "' /><br />";
                        name = items[j].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                        txt += "session[" + i + "] item[" + j + "]<br />" + img + path + file + end + name + "<br />";
                    }
                }
                return txt;
            }

            function displayResult()
            {
                var xmlDoc = loadDoc("../gallery/gallery.xml");
                var sessions = xmlDoc.getElementsByTagName("session");
                var txt = getContent(sessions);
                document.getElementById("content").innerHTML = txt;
            }
        </script>
    </head>
    <body onload="displayResult()">
        <div id='content'></div>
    </body>
</html>

Brilliant, thank you! I think I gained a level in javascript thanks to you. I shall ponder over this code with ease now when I don't have to brood over it any more. Again; thanks.

tomdemuyt · Accepted Answer · 2012-04-30 12:31:36Z

0

It would seem to me that you want to show all items.

Yet you loop over 'session', of which there is only one.

So at best you will get only 1 picture this way..

You probably want to loop over xmlDoc.getElementsByTagName("item") and still use the session one to have access to the path.

edited Apr 30, 2012 at 12:31

user785541

answered Sep 9, 2011 at 21:15

tomdemuyt

4,5922 gold badges35 silver badges62 bronze badges

4 Comments

Richard Atterfalk Over a year ago

x is still greater then i so it should keep counting upwards and search all the child-nodes anyway. But it's stuck on 0. I shall look into what you said though and see if it can lead me somewhere. It's just confusing why it won't count upwards since I ask it to print x and i on the screen.

Paul Grime Over a year ago

As @tomdemuyt has said, x.length==1 as you are looping through the <session> elements.

Richard Atterfalk Over a year ago

But i is equal 0 still, so it doesn't go up. Or am I'm thinking in the wrong way here?

Richard Atterfalk Over a year ago

And everything disappears when I'm selecting the <item>-element instead. Any good ideas of how to rebuild it? I am very new to xml, perhaps I should have added that. :)

Collectives™ on Stack Overflow

javascript xml reader

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related