[FIXED] How to convert items that are returned as an XML string rather than JSON?

Issue

I am having the following issue :

BE is returning a JSON file that has keys and values but some values are in XML format. How can I turn them into JSON as well ?

It's the first time I am seeing this kind of structure. So any help would be appreciated. I am working on in a React environment.

[{
    "price": 19,
    "currency": "GBP",
    "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
    "items": [
        {
            "size": "regular",
            "coating": "none",
            "amount": 8
        },
        {
            "size": "regular",
            "coating": "CBD",
            "amount": 4
        }
    ]
},
{
    "price": 18,
    "currency": "GBP",
    "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
    "items": "<items><item><size>regular</size><coating>none</coating><amount>10</amount></item><item><size>regular</size><coating>CBD</coating><amount>2</amount></item></items>"
},
{
    "price": 19,
    "currency": "GBP",
    "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
    "items": [
        {
            "size": "small",
            "coating": "none",
            "amount": 8
        },
        {
            "size": "small",
            "coating": "CBD",
            "amount": 4
        }
    ]
},
{
    "price": 18,
    "currency": "GBP",
    "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
    "items": "<items><item><size>small</size><coating>none</coating><amount>10</amount></item><item><size>small</size><coating>CBD</coating><amount>2</amount></item></items>"
},
{
    "price": 17,
    "currency": "GBP",
    "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
    "items": "<items><item><size>regular</size><coating>none</coating><amount>12</amount></item></items>"
},
{
    "price": 17,
    "currency": "GBP",
    "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
    "items": "<items><item><size>small</size><coating>none</coating><amount>12</amount></item></items>"
}]

Solution

Ideally it should be corrected at backend itself but still if you don't have a control on backend and want to parse it in frontend only. You can simply achieve this requirement with the help of DOMParser API.

Live Demo :

const inputArr = [{
  "price": 19,
  "currency": "GBP",
  "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
  "items": [
    {
      "size": "regular",
      "coating": "none",
      "amount": 8
    },
    {
      "size": "regular",
      "coating": "CBD",
      "amount": 4
    }
  ]
}, {
  "price": 18,
  "currency": "GBP",
  "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
  "items": "<items><item><size>regular</size><coating>none</coating><amount>10</amount></item><item><size>regular</size><coating>CBD</coating><amount>2</amount></item></items>"
}, {
  "price": 19,
  "currency": "GBP",
  "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
  "items": [
    {
      "size": "small",
      "coating": "none",
      "amount": 8
    },
    {
      "size": "small",
      "coating": "CBD",
      "amount": 4
    }
  ]
}, {
  "price": 18,
  "currency": "GBP",
  "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
  "items": "<items><item><size>small</size><coating>none</coating><amount>10</amount></item><item><size>small</size><coating>CBD</coating><amount>2</amount></item></items>"
}, {
  "price": 17,
  "currency": "GBP",
  "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
  "items": "<items><item><size>regular</size><coating>none</coating><amount>12</amount></item></items>"
}, {
  "price": 17,
  "currency": "GBP",
  "productImage": "https://daye.cdn.prismic.io/daye/ee153f6163435330b18495535217c531300382a8_product2x.png",
  "items": "<items><item><size>small</size><coating>none</coating><amount>12</amount></item></items>"
}];

const itemKeys = ['size', 'coating', 'amount'];

function parseXMLString(arr, itemKeys) {
  const parser = new DOMParser();
  arr.forEach((o, index) => {
    const a = [];
    if (typeof o.items === 'string') {
      const xmlParsedStr = parser.parseFromString(o.items, "text/xml");
      itemKeys.forEach(item => {
        const itemKeysArr = xmlParsedStr.getElementsByTagName(item);
        for (let i=0; i < itemKeysArr.length; i++) {
          for (let j=0; j < itemKeysArr[i].childNodes.length; j++) {
            a[i] ? a[i][item] = itemKeysArr[i].childNodes[j].nodeValue :
            a[i] = { [item]: itemKeysArr[i].childNodes[j].nodeValue }
          }
        }
      })
      arr[index].items = a;
    }
  });
  return arr;
}

console.log(parseXMLString(inputArr, itemKeys));

Answered By - Rohìt Jíndal
Answer Checked By - - Clifford M. (ReactFix Volunteer)