解析 RSS 图像 JavaScript

Question

I have to parse an XML file from the web which contains a tag for an image URL. By parsing, all necessary tags are parsed and the URL of image is recuperated, but I can't display it from his URL on the index file ==>An empty blank square is displayed. Code (Parser.js):

var Parser = {
dataReceivedCallback : null,
XHRObj : null,   
url : "http://feeds.feedburner.com/jetsetmagazine_agenda_culturel_cinema?format=xml"
};

Parser.init = function() {
var success = true;
if (this.XHRObj) {
    this.XHRObj.destroy();  // Save memory
    this.XHRObj = null;
}

return success;
};

Parser.fetchDatas = function() {
if (this.XHRObj == null) {
    this.XHRObj = new XMLHttpRequest();
}

if (this.XHRObj) {
    this.XHRObj.onreadystatechange = function() {
        //4 = requete terminé avec succes et la réponse est préte
       if (Parser.XHRObj.readyState == 4) {
           //On commence le parsing
           Parser.createDatas();
       }
};
       
this.XHRObj.open("GET", this.url, true);
this.XHRObj.send(null);
}
else {
    alert("Failed to create XHR");
}
};

Parser.createDatas = function() {
//la réponse est OK
if (this.XHRObj.status != 200) {
   alert("XML Parser Error " + this.XHRObj.status);
}
else {
    var xmlElement = this.XHRObj.responseXML.documentElement;
    
    if (!xmlElement) {
        alert("Failed to get valid XML");
    }
    else {
        // Parse RSS
        // Get all "item" elements
        var items = xmlElement.getElementsByTagName("item");
        
        var Noms = [ ];
        var Prenoms = [ ];
        var Adresses = [ ];
        var Categories=[];
        var Images=[ ];
        var Dates= [ ];
        
        for (var index = 0; index < items.length; index++) {
            var nomElement = items[index].getElementsByTagName("title")[0];
            var prenomElement = items[index].getElementsByTagName("description")[0];
            var adresseElement = items[index].getElementsByTagName("link")[0];
            
            var CategoriesElement = items[index].getElementsByTagName("category")[0];
            var ImagesElement = items[index].getElementsByTagName("origEnclosureLink")[0];  //      origEnclosureLink: URL image Tag container on the XML file
            var DatesElement = items[index].getElementsByTagName("pubDate")[0];

            
            
            
            if (nomElement && prenomElement && adresseElement) {
                Noms[index] = nomElement.firstChild.data;
                Prenoms[index] = prenomElement.firstChild.data;
                Adresses[index] = adresseElement.firstChild.data;
                Categories[index] = CategoriesElement.firstChild.data;
                Images[index] = ImagesElement.firstChild.data;
                Dates[index] = DatesElement.firstChild.data;
                //  alert(Images[index]);


            }
        }
    
        // Setting recuperated content tag from XML to entity Class (Data)
        Data.setNoms(Noms);
        Data.setPrenoms(Prenoms);
        Data.setAdresses(Adresses);
        Data.setImgs(Images);
        Data.setCategories(Categories);
        Data.setDates(Dates);



        
        if (this.dataReceivedCallback) {
            this.dataReceivedCallback();    /* Notify all data is received and stored */
        }
    }
}
};   

Code(Main.js)

if ( Parser.init()) {
    
    Parser.dataReceivedCallback = function() {
    var i;
        for(i=0; i<Data.getNomCount(); i++){
            // display data
$(".datas").append("<img src ="+Data.getImgs(i)+" height='200px' width='340px'/></a><a id  ='titre'>"+Data.getNom(i)+"</a><br>");           

        }
    };
  
    Parser.fetchDatas();    

Answer 1

First of all you should clean your code a bit:

$(".datas").append("<img src='"+Data.getImgs(i)+"' height='200px' width='340px'/><a id ='titre"+i+"'>"+Data.getNom(i)+"</a><br>");

if your img have space in the name it will fail. Making many elements with the same ID is also a bad idea.

Does your code work in browser? There is nothing here about Data object. You can run it as a debug from SDK and then from chrome dev tools/network check are those images accessed properly and are there any issues in console. You can also access element that is injected into HTML and check its properties.