Radio button label is not showing up

Ionic Framework ionic-v3
1

Hi,

I am new to ionic and facing one weird issue. I am trying to display alter popup with radio button input type. Everything working as expected but for in one scenario i need to call API and get the response and then add those responses on the alter popup as radio buttons. There i am getting response values properly and popup opens and radio buttons are also displaying as expected but didnt see any label for that. Not sure why labels or value are not showing for that radio button. Here is my code and issue screen shot.

Ionic version details:

image
image.png1209×180 37.9 KB

Error:
image

Code :

if(options[i].indexOf('-')>0){  //THIS BELOW CONDITION IS NOT WORKING. 
          var arrayString=options[i];
          console.log("arrayString:"+arrayString)
            var country = this.restProvider.details.COUNTRY;
            this.restProvider.getResponseOptionsTranslations(arrayString,country).then(res => {
              let transResponses: any =[];
              transResponses = res['value'] as string[];
              for(var i=0;i<transResponses.length;i++){
                if(transResponses[i]["TRANSLATION_VALUE"]!= undefined){
                  var transRes=transResponses[i]["TRANSLATION_VALUE"];
                  alert.addInput({
                    type: 'radio',
                    label:transRes,
                    value:transRes,
                  });
                  console.log("transRes2:"+transRes)
                }
              }
              
            });

Any inputs are highly appreciated.

2

To clarify, you are seeing the values you expect in the console for transRes?

Have you tried hard coding the values as a test? This would remove a ‘variable’ from the process and help you narrow down the issue. If it fails with a fixed value, then it might be a css issue or something else.

3

Thanks for the quick response Chris, I try to hard coded value inside for loop but still didn’t work.

But if i hard code value before getResponseOptionsTranslations() as below then i can able to see hard coded value as well as actual result also.

if(options[i].indexOf(’-’)>0){
var arrayString=options[i];
console.log(“arrayString:”+arrayString)
var country = this.restProvider.details.COUNTRY;
let arrStr=arrayString.split(’-’);
alert.addInput({
type: ‘radio’,
label:arrStr[0],
value:arrStr[0],
});
alert.addInput({
type: ‘radio’,
label:arrStr[1],
value:arrStr[1],
});

            this.restProvider.getResponseOptionsTranslations(arrayString,country).then(res => {
              let transResponses: any =[];
              transResponses = res['value'] as string[];
              for(var i=0;i<transResponses.length;i++){
                if(transResponses[i]["TRANSLATION_VALUE"]!= undefined){
                  var transRes=transResponses[i]["TRANSLATION_VALUE"];
                  alert.addInput({
                    type: 'radio',
                    label:transRes,
                    value:transRes,
                  });
                  console.log("transRes2:"+transRes)
                }
              }
              
            });
        }

below screen shot, english is default result which is coming from just string split. but the spanish translations are coming from data base.

image