XML Image path not converting to actual image using JQuery

Question

I have this XML data set that I am working with:

<?xml version="1.0" encoding=UTF=8?>
    <peopleNetwork>
     <person id="1">
      <name>Alice</name>
      <friend>Ruby</friend>
      <image>images/ruby.jpg</image>
     </person>
     <person id="2">
      <name>Tom</name>
      <friend>Katty</friend>
      <image>images/ketty.jpg</image>
     </person>
    </peopleNetwork>

As you can see I have image tags with image paths, I have written a code shown in the fiddle - I am not sure what I am doing wrong but the path does not convert to actual image.

$("#container").append('<div class"peopleNetwork"><img src="images/' + $(xmlDoc).find("image").text() + '/><p>' + $(xmlDoc).find('person[id="1"]').text() + '</p></div>');

https://jsfiddle.net/3zg8nyat/

Can anyone help please.

What does console.log($(xmlDoc).find("image").text()) show? Is picture actually located at images/images/ketty.jpg? Does the Network pane in the developer tools show whether it's loading something? — Álvaro González
– Álvaro González, Commented Nov 23, 2016 at 15:41
No error is shown and nothing loads. The image is at that location — Tom Elite
– Tom Elite, Commented Nov 23, 2016 at 15:44
If not even console.log() works you're either not executing that line of code or you have a syntax error that prevents all code from running. (BTW, your fiddle does not work at all for me, it complaints about unknown $). — Álvaro González
– Álvaro González, Commented Nov 23, 2016 at 15:46
If I try the same code but without the img line it works fine but then only text is displayed — Tom Elite
– Tom Elite, Commented Nov 23, 2016 at 15:51

Community · Accepted Answer · 2017-05-23 11:59:55Z

1

First of all, your XML is malformed. That prevents it from being parsed by any dedicated tool. Where it says:

<?xml version="1.0" encoding=UTF=8?>

... it should say:

<?xml version="1.0" encoding="UTF-8"?>

Once you fix that, you need to parse your XML with jQuery.parseXML():

jQuery.parseXML uses the native parsing function of the browser to create a valid XML Document. This document can then be passed to jQuery to create a typical jQuery object that can be traversed and manipulated.

var xml = $($.parseXML(xmlDoc))
var src = xml.find("image").text();
console.log(src);

See check an online demo.

Additional issues:

You don't close the quotes of the src attribute:

'<img src="images/' + $(xmlDoc).find("image").text() + '/>'

You retrieve all images at once because jQuery.text() gets:

the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 23, 2016 at 15:58

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Elite Over a year ago

thanks for pointing out the issue with <?xml version="1.0" encoding=UTF=8?> . Even fixing this does not display the images

Álvaro González Over a year ago

I've highlighted two more issues but, seriously, you need to do one thing at a time and al least attempt to debug stuff (I can't believe that console.log() doesn't work for you).

Tom Elite Over a year ago

Still no luck, its not producing any errors in the console but nothing is being displayed. I have checked and those are the right folder path

Álvaro González Over a year ago

You don't have to wait until the code is so broken that it triggers an error. You can actively use the console to display variables to your liking—and as you can see there are some other tools: a debugger, a network inspector, etc.

Dave Cripps · Accepted Answer · 2016-11-23 15:56:39Z

0

The src in your img tag is coming out as images/images/filename.jpg. Are the image files really in an images subdirectory within another images subdirectory?

Either remove the hardcoded images/ from your img tag or take the images/ out of each <image> node value in your XML.

answered Nov 23, 2016 at 15:56

Dave Cripps

9297 silver badges11 bronze badges

2 Comments

Tom Elite Over a year ago

Hi, yes. so I have 1 main image folder that has 3 more containing different images which are images, images1 and images2

Dave Cripps Over a year ago

Ahh, sorry then. I withdraw my answer. :)

Collectives™ on Stack Overflow

XML Image path not converting to actual image using JQuery

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related