0

I am having problem to render below array with objects.

var newList = '{appointmentList}';
var apptList = JSON.parse(newList);
alert(newList);
alert result:
[{
   "userId":"0051a000002BHA7AAO",
   "subject":"Appcal blk",
   "startDateTime":"2017-07-03T18:00:00.000Z",
   "profileId":"a1C1a000000zkWXEAY",
   "location":"Rm # 23-C48 in 177 Huntington Ave",
   "id":"a160j000000BOgDAAW",
   "endDateTime":"2017-07-03T19:00:00.000Z",
   "duration":30,
   "categoryType":"30-min Appts (shown on Public Calendar)",
   "bookedSlotList":[],
   "availableSlotList":
       [{
          "startDateTime":"2017-07-03T18:00:00.000Z",
          "endDateTime":"2017-07-03T18:30:00.000Z"
        },
        {
          "startDateTime":"2017-07-03T18:30:00.000Z",
          "endDateTime":"2017-07-03T19:00:00.000Z"
        }],
   "availableBlockList":
       [{
          "startDateTime":"2017-07-03T18:00:00.000Z",
          "endDateTime":"2017-07-03T19:00:00.000Z"
       }],
   "availability":"Any",
   "appointmentTypeList":
       [
         "Phone"
       ]
 }];

I am using for loop, but having problem with availableSlotList array.

if(apptList.length > 0) {
for(var i=0;i<apptList.length;i++) {
    var catg = (catMap[apptList[i].categoryType] == 'Individual') ? '' : 'none';
    var apptSize = JSON.stringify(apptList[i].availableBlockList);
    //alert(apptSize+'---'+i);
    var showAppt = (apptList[i].availableBlockList.length == 0) ? 'none' : '';
    var noAppt = (apptList[i].availableBlockList.length == 0) ? '' : 'none';

    html += '<table width="100%" style="font-size:13px;"><tr><td>'
    html += '<apex:outputText value="' + apptList[i].startDateTime +' - '+ apptList[i].startDateTimee + '" style="font-weight:bold;margin-bottom:2px;" />  ';
    html += '<apex:outputText value="(' + tzName + ')" style="font-weight: bold;" /></td></tr>';
    html += '<tr style="display:' + catg + '">';
    html += '<td class="tabLine" style="display:' + showAppt + '"><apex:outputText value="Appointments available during: " />';
    html += '</td></tr></table>';

    for(var j;j<apptList[i].availableSlotList) {
        alert(apptList[i].availableSlotList.startDateTime);
    }
}

}

Improve this question
2
  • 1
    You can't mix JavaScript and Visualforce that way; Visualforce tags are rendered on the server, not the client. Use normal HTML elements instead. Commented Jul 3, 2017 at 17:55
  • I am not having problem with tags. I am having problem loop array objects like availableSlotList and availableBlockList. Commented Jul 3, 2017 at 18:33

1 Answer 1

Reset to default
0

See sfdcfox's comment: you can only use plain HTML tags in this logic e.g. just a <span> in place of <apex:outputText>.

On the question of looping, based on the JSON and the name, that field is an array so you need to loop over its elements:

    for (var j = 0; j < apptList[i].availableSlotList.length; i++) {
        alert(apptList[i].availableSlotList[j].startDateTime);
    }

It is best to reduce the repeated array indexing for code clarity (and to not waste execution time) by adding some local variables:

for (var i = 0; i < apptList.length; i++) {
    // Use appt in place of all apptList[i] references
    var appt = apptList[i];
    ...
    for (var j = 0; j < appt.availableSlotList.length; j++) {
        var availableSlot = appt.availableSlotList[j];
        alert(availableSlot.startDateTime);
    }
}
Improve this answer
2
  • Hi Keith, Thanks for your response. I tried the way you have mentioned. But it's not looping. I tried below way, first time I am seeing value but loop not closing and printing undefined. Please check the data structure again. for(var j in appt.availableBlockList) { var block = appt.availableBlockList[j]; alert(block.startDateTime); } Commented Jul 3, 2017 at 18:23
  • Hey Keith, I updated my question. Please check again. Commented Jul 3, 2017 at 18:39

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.