Display particular infos from XML api using javascript-CodePudding

I have the following API

          <event>
            <match_id>2079876</match_id>
            <o1>2.57</o1>
            <oX>2.70</oX>
            <o2>2.80</o2>
            <oU>1.38</oU>
            <oO>2.52</oO>
            <oG>2.05</oG>
            <oNG>1.58</oNG>
            <p1>2.70</p1>
            <pX>2.81</pX>
            <p2>2.99</p2>
            <pU>1.42</pU>
            <pO>2.82</pO>        
          </event>
          <event>
            <match_id>2081006</match_id>
            <o1>1.12</o1>
            <oX>6.35</oX>
            <o2>14.50</o2>
            <oU>2.95</oU>
            <oO>1.28</oO>
            <oG>1.87</oG>
          </event>

and i have a function that fetchs the API and then i created one that gets as input <match_id>2079876</match_id> and i want to find this id from the xml and display the or depends on the choice

function findSpecific(xml, choice, place){
    let matches = xml.getElementsByTagName('event');
    //console.log(matches[0]);
}

CodePudding user response：

How do you think convert to Json and get data what you want.

const xmlSample = '<tag>tag content</tag><tag2>another content</tag2><tag3><insideTag>inside content</insideTag><emptyTag /></tag3>';
console.log(parseXmlToJson(xmlSample));

function parseXmlToJson(xml) {
    const json = {};
    for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
        const key = res[1] || res[3];
        const value = res[2] && parseXmlToJson(res[2]);
        json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;

    }
    return json;
}

CodePudding user response：

Modern browsers support (CSS) Query selectors and Xpath expressions on Document instances. Xpath expressions are the more powerful possibility. They support the different node types, complex conditions and XML namespaces.

The expression in the following example matches all element inside the event with a specific match_id child.

const events = getXMLDocument();
const dataNodes = events.evaluate(
    '//event[match_id="2081006"]/*', 
    events, 
    null, 
    XPathResult.ANY_TYPE, 
    null
);

const eventData = {};
let dataNode = dataNodes.iterateNext();
while (dataNode) {
  eventData[dataNode.localName] = dataNode.textContent;
  dataNode = dataNodes.iterateNext();
}
console.log(eventData);

function getXMLDocument() {
  const xmlString = `<events>
      <event>
        <match_id>2079876</match_id>
        <o1>2.57</o1>
        <oX>2.70</oX>
        <o2>2.80</o2>
        <oU>1.38</oU>
        <oO>2.52</oO>
        <oG>2.05</oG>
        <oNG>1.58</oNG>
        <p1>2.70</p1>
        <pX>2.81</pX>
        <p2>2.99</p2>
        <pU>1.42</pU>
        <pO>2.82</pO>        
      </event>
      <event>
        <match_id>2081006</match_id>
        <o1>1.12</o1>
        <oX>6.35</oX>
        <o2>14.50</o2>
        <oU>2.95</oU>
        <oO>1.28</oO>
        <oG>1.87</oG>
      </event>
    </events>`;
    return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}