Jquery parse and save part of XML in localstorage

To get a specific node from an XML document, you can select the XML node like this:

Javascript:

var programmeNodes = fullxml.getElementsByTagName('programme');

jQuery:

var programmeNodes = $(fullxml).find('programme');

My Solution:

This solution grabs all <programme> nodes and saves the data into an array and then stores that array in local storage for later use.

Given XML data like this:

var xml = `
    <programmes>
        <programme id="1">
            <display-name>Test 1</display-name>
        </programme>
        <programme id="2">
            <display-name>Test 2</display-name>
        </programme>
  </programmes>
`;

Will give an array of objects like this which can then be stored.

[
    {
        id: 1,
        name: Test1
    },
    {
        id: 2,
        name: Test2
    }
]

Full demo code:

var xml = `
    <programmes>
        <programme id="1">
            <display-name>Test 1</display-name>
        </programme>
        <programme id="2">
            <display-name>Test 2</display-name>
        </programme>
    </programmes>
`;

var fullxml = $.parseXML(xml);

// find <programme> XML elements

var programmeNodes = $(fullxml).find('programme');

// create array for programme data

var programmesArr = [];

// loop through each programme and store data in array

$.each(programmeNodes, function(i) {
    var programmeID = $(programmeNodes[i]).attr('id');
  var programmeDisplayName = $(programmeNodes[i]).find('display-name').text();
  programmesArr.push({
    id: programmeID,
    name: programmeDisplayName
  });
});

// store programmesArr in local storage
// localStorage only allows strings, so we need to convert array to JSON string

localStorage.setItem('programmes', JSON.stringify(programmesArr));

// get programmes from local storage

var storedProgrammes = JSON.parse(localStorage.getItem('programmes'));

DEMO: https://jsfiddle.net/1nLw7hjr/13/

Usage:

var programmeToFind = 2;

var programme = $.grep(storedProgrammes, function(e) {
    return e.id == programmeToFind;
});

console.log(programme[0].id); // 2
console.log(programme[0].name); // Test2

Or as a little function:

function searchProgrammes(id) {
    var programme = $.grep(storedProgrammes, function(e) {
        return e.id == id;
    });
    return programme[0];
}

var programme = searchProgrammes(2);

console.log(programme.id); // 2
console.log(programme.name); // Test2

grep()

Finds the elements of an array which satisfy a filter function. The original array is not affected.

I think you don't get any response because when you append the XML to the document, the browser try to parse it, and because this isn't valid HTML, it fails and show only the text, not the tags. So, the simplest solution will to not use jQuery's append() method, and instead, append the XML via text() (that doesn't parse the HTML tags, and instead escapes them), like:

$(function() {
  $.ajax({
    type: "GET",
    url: "/myxml",
    dataType: "xml",
    success: function(xml) {
      window.localStorage.setItem('fullxml', xml);
      var el = $("#text");
      el.text(el.text() + window.localStorage.getItem('fullxml'));
    },
    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });
});

Edit:

If you want to store only some elements, you should convert the XML to objects. Use DOMParser, as follows:

$(function() {
  $.ajax({
    type: "GET",
    url: "/myxml",
    dataType: "xml",
    success: function(xml) {
      var xmldoc;

      if (window.DOMParser) {
        parser = new DOMParser();
        xmldoc = parser.parseFromString(xml, "text/xml");
      } else { // Internet Explorer
        xmldoc = new ActiveXObject("Microsoft.XMLDOM");
        xmldoc.async = false;
        xmldoc.loadXML(xml);
      }

      var programmes = xmldoc.getElementsByTagName('programme');
      var str = '';
      programmes.forEach(function(el) {
        str += el.outerHTML;
      });
      // str now contains only the <programme> elements
      window.localStorage.setItem('fullxml', str);
      var el = $("#text");
      el.text(el.text() + window.localStorage.getItem('fullxml'));
    },
    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });
});