0

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.

Tom Elite
  • 49
  • 3
  • 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 Nov 23 '16 at 15:41
  • No error is shown and nothing loads. The image is at that location – Tom Elite Nov 23 '16 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 Nov 23 '16 at 15:46
  • the fiddle is working fine for me, are you using chrome? – Tom Elite Nov 23 '16 at 15:49
  • If I try the same code but without the img line it works fine but then only text is displayed – Tom Elite Nov 23 '16 at 15:51

2 Answers2

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

Community
  • 1
  • 1
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
  • thanks for pointing out the issue with . Even fixing this does not display the images – Tom Elite Nov 23 '16 at 16:12
  • 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). – Álvaro González Nov 23 '16 at 16:20
  • 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 – Tom Elite Nov 23 '16 at 16:32
  • 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](https://developers.google.com/web/tools/chrome-devtools/console/console-reference)—and as you can see there are some other tools: a debugger, a network inspector, etc. – Álvaro González Nov 24 '16 at 09:50
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.

Dave Cripps
  • 929
  • 7
  • 11