Convert/Parse XML to JSON

Questions
1

I think what I want to do is simpler than I imagine. But I can’t find the solution.
I have an XML file that I need to pass to JSON, to make a Virtual List.

I can access the root of the XML, but I don’t know how to access the nodes / elements of the XML from javascript.

I try with parseXML() but this not work with Framework7.
I found some webs with examples but didn’t work.

Look in Google but what I found didn’t work.
I don’t know if I’m getting complicated or not.
Thanks in advance.

The code I have so far is:

$$('.busqueda-boton').on('click', function () {
        var datosbusqueda = app.form.convertToData('#busqueda-form');
        var busqueda = datosbusqueda.medicamento;
        var busquedaUpper = busqueda.toUpperCase();

        app.request({
            url: 'http://xxxxxxxx/get_producto.php?NOM_LARGO=%' + busquedaUpper + '%',
            method: 'GET',
            dataType: 'XML',
            crossDomain: true,
            //data: 			busqueda, 
            success: function (data, textStatus) {

               // var items = data;
                console.log(data);

                var virtualList = app.virtualList.create({
                    // List Element
                    el: '.virtual-list-busqueda',
                    // Pass array with items
                    items: data,
                    emptyTemplate: 'No se encontraron resultados.',
                    // List item Template7 template
                    itemTemplate: '<li>' +
                        '<a href="#" class="item-link item-content">' +
                        '<div class="item-inner">' +
                        '<div class="item-title-row">' +
                        '<div class="item-title">' + ITEM + '</div>' +
                        '</div>' +
                        '<div class="item-subtitle">' + ITE + '</div>' +
                        '</div>' +
                        '</a>' +
                        '</li>',
                    // Item height
                    height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46),
                });
                virtualList.clearCache();
            },
            error: function (xhr, textStatus, errorThrown) {
            },
        });
    });

The structure of the XML is:

<?xml version="1.0"?>
<Consulta_productos>
  <NOM_LARGO>%AMOXI 250%</NOM_LARGO>
  <Detalle>
    <Producto>
      <NOM_LARGO>AMOXI 250 MAR SUS EXT X 105</NOM_LARGO>
      <COD_ALFABETA>2xxxxxx</COD_ALFABETA>
    </Producto>
    <Producto>
      <NOM_LARGO>AMOXI 250 MAR SUS EXT</NOM_LARGO>
      <COD_ALFABETA>2xxxxxx</COD_ALFABETA>
    </Producto>
  </Detalle>
</Consulta_productos>
2

This might not be applicable to your situation, but often web apps are set up to deliver both XML or JSON, depending on what is requested. If you changed dataType: 'JSON' what happens?

The data is usually stored in a structured database and XML or JSON is just a method of transfer/delivery, so unless you’re actually dealing with physical XML files on a server, just try modifying the method of delivery.

3

Thank for your suggestion, but doesn’t work. I recibe and XML file from a webserver.

I try this
$$(data).find(‘Producto’).each(function () {
var Titles = $$(this).find(‘NOM_LARGO’).text();
console.log(Titles);
});

But got this error
Uncaught TypeError: this[a].querySelectorAll is not a function
at Dom7.find

The complete error

Captura de Pantalla 2020-03-05 a la(s) 09.11.13
Captura de Pantalla 2020-03-05 a la(s) 09.11.13922×482 66.8 KB

4

your app.request return ‘text’ (def)
not xml

var text=`
<?xml version="1.0"?>
<Consulta_productos>
  <NOM_LARGO>%AMOXI 250%</NOM_LARGO>
  <Detalle>
    <Producto>
      <NOM_LARGO>AMOXI 250 MAR SUS EXT X 105</NOM_LARGO>
      <COD_ALFABETA>2xxxxxx</COD_ALFABETA>
    </Producto>
    <Producto>
      <NOM_LARGO>AMOXI 250 MAR SUS EXT</NOM_LARGO>
      <COD_ALFABETA>2xxxxxx</COD_ALFABETA>
    </Producto>
  </Detalle>
</Consulta_productos>
`;


var doc = $$(new DOMParser().parseFromString(text,'text/html'));

doc.find('producto').forEach(function(itm){
  console.log($$(itm).find('nom_largo').text());
});
2 Likes
5

Thank you very much,. this works,. I was really stuck.