Question

I have 2 large XML files:

1. Car data (id, name, image, etc).
2. Deals (car_id, miles, speed, etc)

At the moment I firstly read the Car XML using jQuery AJAX and generate the relevant HTML.

The problem is that next I need to read in the Tariff XML which has the car_id, although I would like to get the car image. How can I go about saving the car_id and image in temporary memory without reading the XML file again to find the image?

$.ajax({
    type: "GET",
    url: carXmlPath,
    dataType: "xml",
    contentType: "text/xml; charset=utf-8",
    success: function(xml){
        carCarousel.html("");
        $(xml).find("car").each(function(index, value){
            var tis = $(this), first = '';
            if(index == 0) first = ' class="selected"';
            carCarousel.append('<li'+first+' data-id="'+tis.find("id").text()+'">' + tis.find("name").text() + tis.find("thumbnail").text() + '</li>');
        }); 
        carCarousel.removeClass("loading");
    }           
});

I know this should all be implemented on the server but that is not an option here, it has to be done in JS.

Answer 1

If you’re creating document fragments to attach to the DOM, then I would use data islands.

E.g. data-car-img and data-car-id.