How to access JSON object from xml2js in Angular?

Question

I'm using xml2js to convert some xml to json in Angular like so:

showData() {
    xml2js.parseString(this.xml, (err, result) => {
      this.text = result;
      console.log(this.text);
    })
  }

It works great and I'm getting JSON in my console but I'm having trouble figuring out how to access specific data. Here is what the JSON format looks like:

I want to access the properites id, maxlength, name, and type within UIElement. I want to console.log and use the values in these properties but cannot figure out how to do so.

console.log(this.text['cm:property-placeholder']['cm:default-properties][0]['UIElement'][0]['$']) to get the object. then from there you add id, maxlength, etc to the end to get the individual elements — rhavelka
– rhavelka, Commented Mar 1, 2021 at 16:39
@rhavelka I had originally tried that but I receive the error Cannot read property '0' of undefined — JCA
– JCA, Commented Mar 1, 2021 at 16:46
do you know if its is on the cm:default-properties or the UIElement that you were getting the error. I will update my answer as we figure things out — rhavelka
– rhavelka, Commented Mar 1, 2021 at 16:51
I missed the UIInput layer in my comment and my answer. I will update it — rhavelka
– rhavelka, Commented Mar 1, 2021 at 16:54

rhavelka · Accepted Answer · 2021-03-01 16:59:02Z

1

What I would do first is get your UIElement array in into its own array. So you will do something like this

const uiElmentArray = this.text['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIElement'];

/**
uiElementArray = [
    {$: {id: 'customerName', ...}},
    {$: {id: 'mm_test_aggregate.interval', ...}},
    ...
]
**/

From there you can map the contents to get rid of the $ from the array

const updatedArray = uiElementArray.map(uiElement => uiElement.$);

/**
updatedArray = [
    {id: 'customerName', ...},
    {id: 'mm_test_aggregate.interval', ...},
    ...
];
**/

From there you can loop through your elements to display them

updatedArray.forEach(uiElement => {
   console.log(uiElment)
});

Making the final code look something like this:

showData() {
    xml2js.parseString(this.xml, (err, result) => {
      const uiElementArray = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIElement'];
      const updatedArray = uiElementArray.map(uiElement => uiElement.$);
      updatedArray.forEach(uiElement => {
          console.log(uiElment)
      });
    })
  }

which can be condensed down to something like this

showData() {
    xml2js.parseString(this.xml, (err, result) => {
      this.myData = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIElement'].map(uiElement => uiElement.$);
    })
  }

edited Mar 1, 2021 at 16:59

answered Mar 1, 2021 at 16:50

rhavelka

2,4244 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JCA Over a year ago

Now getting the error Cannot read property 'cm:property-placeholder' of undefined

rhavelka Over a year ago

That was a typo on my end. I have this.text['cm:property-placeholder'] when it should be result['cm:property-placeholder']. I updated my code

JCA Over a year ago

Yeah I just caught that too. It's working great. Thank you!

Collectives™ on Stack Overflow

How to access JSON object from xml2js in Angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related