Display particular infos from XML API using Javascript

Question

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 <o1> or <o2> depends on the choice

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

ThW · Accepted Answer · 2021-09-30 07:46:50Z

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 elements 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');
}

Hyunjune Kim · Accepted Answer · 2021-09-28 08:11:24Z

0

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;
}

answered Sep 28, 2021 at 8:11

Hyunjune Kim

4855 silver badges13 bronze badges

1 Comment

NinjitsuIXX Over a year ago

How can i convert it if it is a link? Plus the XML is in very bad format that i cannot change it

Collectives™ on Stack Overflow

Display particular infos from XML API using Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related