Change the values of an item after an AJAX request

I have tried to add an if statement to change the weekday_tinyint to "Sunday" if value = 1, but when I do this it seems to mess up the returned object.

The following code seems to work just fine. Please advise me on the best way to create an array and then process the array so I can make changes to the individual items before listing them.

Thank you.

<!-- language: lang-html -->

<div class="mypanel"></div>

<!-- language: lang-js -->

index = 0;
day = 0;
$.getJSON('https://arizona-na.org/bmlt/main_server/client_interface/json/?switcher=GetSearchResults&services=5', function(data) {
while (index < data.length) {
if (text === undefined) {
var text = `${data[index].weekday_tinyint}` + `      ` + `${data[index].start_time}` + `      ` + `${data[index].meeting_name}` + `      ` + `(` + `${data[index].formats}` + `)` + `           ` +
`<a target="_blank" href="https://maps.google.com/maps?q=` + `${data[index].latitude}` + `,` + `${data[index].longitude}` + `">` + `${data[index].location_text}` + `  ` + `${data[index].location_info}` + `  ` + `${data[index].location_street}` + `,  ` + `${data[index].location_municipality}` + `</a><br>`;
} else {
var text = text + `${data[index].weekday_tinyint}` + `      ` + `${data[index].start_time}` + `      ` + `${data[index].meeting_name}` + `      ` + `(` + `${data[index].formats}` + `)` + `           ` +
`<a target="_blank" href="https://maps.google.com/maps?q=` + `${data[index].latitude}` + `,` + `${data[index].longitude}` + `">` + `${data[index].location_text}` + `  ` + `${data[index].location_info}` + `  ` + `${data[index].location_street}` + `,  ` + `${data[index].location_municipality}` + `</a><br>`;
}
index++;
}
$(".mypanel").html(text);
});

I tried changing the script to the following and received errors...

var index = 0;
var daytext = "";
$.getJSON('https://arizona-na.org/bmlt/main_server/client_interface/json/?switcher=GetSearchResults&services=5', function(data) {
while (index < data.length) {
if (${data[index].weekday_tinyint} === 1) 
daytext = `Sunday`; 
else daytext = `other day`;
if (text === undefined) {
var text = `$daytext` + `      ` + `${data[index].start_time}` + `      ` + `${data[index].meeting_name}` + `      ` + `(` + `${data[index].formats}` + `)` + `           ` + 
`<a target="_blank" href="https://maps.google.com/maps?q=` + `${data[index].latitude}` + `,` +  `${data[index].longitude}` + `">` + `${data[index].location_text}` + `  ` +  `${data[index].location_info}` + `  ` + `${data[index].location_street}` + `,  ` + `${data[index].location_municipality}` + `</a><br>`;
} else {
var text = text + `${data[index].weekday_tinyint}` + `      ` + `${data[index].start_time}` + `      ` + `${data[index].meeting_name}` + `      ` + `(` + `${data[index].formats}` + `)` + `           ` + 
`<a target="_blank" href="https://maps.google.com/maps?q=` + `${data[index].latitude}` + `,` +  `${data[index].longitude}` + `">` + `${data[index].location_text}` + `  ` +  `${data[index].location_info}` + `  ` + `${data[index].location_street}` + `,  ` + `${data[index].location_municipality}` + `</a><br>`;
}
index++;
}
$(".mypanel").html(text);
});

It all looks a bit complex what you're doing there. I would suggest to simplify the whole thing and use .map() function instead of your while loop, also I suggest to give your html element an ID instead of the class:

<div id="mypanel"></div>

then your script would be as follows

$.getJSON('https://arizona-na.org/bmlt/main_server/client_interface/json/?switcher=GetSearchResults&services=5', function(data) {
var text = data.map(obj => {
var strDay = "";
switch (parseInt(obj.weekday_tinyint)){
case 1: strDay = "Sunday"; break;
case 2: strDay = "Monday"; break;
case 3: strDay = "Tuesday"; break;
case 4: strDay = "Wednesday"; break;
case 5: strDay = "Thursday"; break;
case 6: strDay = "Friday"; break;
case 7: strDay = "Saturday"; break;
}
return `${strDay}` +`      ` + 
`${obj.start_time}` + `      ` + 
`${data[index].meeting_name}` + `      ` + 
`(` + `${obj.formats}` + `)` + 
`           ` +
`<a target="_blank" href="https://maps.google.com/maps?q=` + `${obj.latitude}` + 
`,` + `${obj.longitude}` + `">` + `${obj.location_text}` + `  ` + 
`${obj.location_info}` + `  ` + `${obj.location_street}` + 
`,  ` + `${obj.location_municipality}` + `</a><br>`;
});
$("#mypanel").html(text);
});

Here is the documentation for the JavaScript map() function
https://www.w3schools.com/jsref/jsref_map.asp

And here is the functioning JsFiddle