How to create a Javascript array or object from an XML file?

// Fetch the XML file
fetch('path/to/your/file.xml')
  .then(response => {
    // Check if the response is successful
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // Parse the response as text
    return response.text();
  })
  .then(xmlString => {
    // Parse the XML string
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

    // Extract marker information
    const markers = Array.from(xmlDoc.getElementsByTagName('marker')).map(marker => ({
      lat: marker.getAttribute('lat'),
      lng: marker.getAttribute('lng'),
      name: marker.getAttribute('name'),
      category: marker.getAttribute('category'),
      nation: marker.getAttribute('nation'),
      typecanon: marker.getAttribute('typecanon'),
      lieu: marker.getAttribute('lieu'),
      pays: marker.getAttribute('pays'),
      url: marker.getAttribute('url'),
    }));

    // Output the markers array
    console.log(markers);

    // Use the 'markers' array in further processing here or within this scope
  })
  .catch(error => {
    console.error('There was a problem fetching the file:', error);
  });

.as-console-wrapper { min-height: 100%!important; top: 0; }

<script>
  const mockedXmlResponse = {
    ok: true,
    text: () => new Promise(resolve => 
      resolve(
`<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> 
<markers> 
  <marker lat="50.84310" lng="4.39330" name="7.7cm Sockel Flak 16 RheinMetall" category="FlakKanonen" nation="Allemagne" typecanon="Artillerie de DCA" lieu="Bruxelles - Musée Royal de l'Armée" pays="Belgique" url="../AfficheCanonGET.php?IdCanonAffiche=170" /> 
  <marker lat="43.13810" lng="-80.26170" name="15cm sFH 13 L/14" category="SchwerenKanonen" nation="Allemagne" typecanon="Artillerie lourde" lieu="Brantford (ON) - Monument" pays="Canada" url="../AfficheCanonGET.php?IdCanonAffiche=256" />  
  <marker lat="61.00500" lng="24.45780" name="10cm K 14" category="LeichtKanonen" nation="Allemagne" typecanon="Artillerie légère" lieu="Hameenlinna - Finnish Artillery Museum" pays="Finlande" url="../AfficheCanonGET.php?IdCanonAffiche=317" />  
  <marker lat="45.88740" lng="11.04740" name="7cm M 99 GebK" category="GebirgsKanonen" nation="Autriche-Hongrie" typecanon="Artillerie de montagne" lieu="Rovereto - Museo Storico Italiano della Guerra" pays="Italie" url="../AfficheCanonGET.php?IdCanonAffiche=733" /><marker lat="-35.21550" lng="149.14510" name="13cm K 09 L/35" category="SchwerenKanonen" nation="Allemagne" typecanon="Artillerie lourde" lieu=" Mitchell, ACT - AWM reserve" pays="Australie" url="../AfficheCanonGET.php?IdCanonAffiche=1519" /> 
</markers>`
      )
    ),
  };

  // mocking JavaScript's fetch function.
  function fetch(url) {
    console.log(`fetching ... $${ url }`);

    return new Promise(resolve =>
      setTimeout(resolve, 1500, mockedXmlResponse)
    );
  }
</script>

const markerAttrToKeyLookup = {
  lat: 'latitudeCanon',
  lng: 'longitudeCanon',
  name: 'nomCanon',
  category: 'categorieCanon',
  nation: 'nationCanon',
  typecanon: 'typeCanon',
  lieu: 'lieuCanon',
  pays: 'paysCanon',
  url: 'url',
}

function createMarkerListFromXmlDocument(xmlDocument) {
  return [
    ...xmlDocument.querySelectorAll('marker')
  ]
  .map(markerElement => {

    return [...markerElement.getAttributeNames()]
      .reduce((markerItem, attrName) => {

        const key = markerAttrToKeyLookup[attrName];
        
        markerItem[key] = markerElement.getAttribute(attrName);

        return markerItem;

      }, {})
  });
}

async function main() {

  const response = await fetch('path/to/file.xml');
  const xmlText = await response.text();

  console.log({ xmlText });

  const xmlDocument = (new DOMParser)
    .parseFromString(xmlText, 'text/xml');

  // console.log({ xmlDocument });

  const markerList =
    createMarkerListFromXmlDocument(xmlDocument);

  console.log({ markerList });
}
main();

.as-console-wrapper { min-height: 100%!important; top: 0; }

<script>
  const mockedXmlResponse = {
    ok: true,
    text: () => new Promise(resolve => 
      resolve(
`<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> 
<markers> 
  <marker lat="50.84310" lng="4.39330" name="7.7cm Sockel Flak 16 RheinMetall" category="FlakKanonen" nation="Allemagne" typecanon="Artillerie de DCA" lieu="Bruxelles - Musée Royal de l'Armée" pays="Belgique" url="../AfficheCanonGET.php?IdCanonAffiche=170" /> 
  <marker lat="43.13810" lng="-80.26170" name="15cm sFH 13 L/14" category="SchwerenKanonen" nation="Allemagne" typecanon="Artillerie lourde" lieu="Brantford (ON) - Monument" pays="Canada" url="../AfficheCanonGET.php?IdCanonAffiche=256" />  
  <marker lat="61.00500" lng="24.45780" name="10cm K 14" category="LeichtKanonen" nation="Allemagne" typecanon="Artillerie légère" lieu="Hameenlinna - Finnish Artillery Museum" pays="Finlande" url="../AfficheCanonGET.php?IdCanonAffiche=317" />  
  <marker lat="45.88740" lng="11.04740" name="7cm M 99 GebK" category="GebirgsKanonen" nation="Autriche-Hongrie" typecanon="Artillerie de montagne" lieu="Rovereto - Museo Storico Italiano della Guerra" pays="Italie" url="../AfficheCanonGET.php?IdCanonAffiche=733" /><marker lat="-35.21550" lng="149.14510" name="13cm K 09 L/35" category="SchwerenKanonen" nation="Allemagne" typecanon="Artillerie lourde" lieu=" Mitchell, ACT - AWM reserve" pays="Australie" url="../AfficheCanonGET.php?IdCanonAffiche=1519" /> 
</markers>`
      )
    ),
  };

  // mocking JavaScript's fetch function.
  function fetch(url) {
    console.log(`fetching ... $${ url }`);

    return new Promise(resolve =>
      setTimeout(resolve, 1500, mockedXmlResponse)
    );
  }
</script>