Examples

HTML-Only result display mode

• Page Javascript:

function loopThroughJSON(obj) {
  var $kvp = $("<div/>");
  for (let key in obj) {
    if (typeof obj[key] === "object") {
      if (Array.isArray(obj[key])) {
        $kvp.append($("<span/>").addClass("questions").html(labelLUT.get(key)));
        $kvp.append($("<br/>"));

        // loop through array
        for (let i = 0; i < obj[key].length; i++) {
          $kvp.append(
            $("<span/>")
              .addClass("answer")
              .html(choiceLUT.get(key).get(obj[key][i]))
          );
        }
        $kvp.append($("<br/>"));
        $kvp.append($("<br/>"));
      } else {
        // call function recursively for object
        $kvp.append(loopThroughJSON(obj[key]));
      }
    } else {
      $kvp.append($("<span/>").addClass("questions").html(labelLUT.get(key)));
      $kvp.append($("<br/>"));
      $kvp.append(
        $("<span/>")
          .addClass("answer")
          .html(
            choiceLUT.has(key) ? choiceLUT.get(key).get(obj[key]) : obj[key]
          )
      );
      $kvp.append($("<br/>"));
      $kvp.append($("<br/>"));

      // do something with value
      // console.log(key + ': ' + obj[key]);
    }
  }

  return $kvp;
}

$("#render").html(loopThroughJSON(jData));

• The Dynamic Content Region PL/SQL:

DECLARE
    formdata CLOB;
    labelLUT CLOB;
    choiceLUTJson CLOB;
BEGIN
    select json_arrayagg(
            json_
    object(
                'NAME' VALUE n.NODE_NAME
                , 'CODES' VALUE n.CHOICES_LOV_CODES
                , 'VALUES' VALUE (select CHOICE_VALUES FROM JSON_TABLE(n.CHOICES_VALUES, '$[0]' COLUMNS (CHOICE_VALUES PATH '$.tl'))))) into choiceLUTJson
        from
        UC_FLOWFORMS_NODE n
        join UC_FLOWFORMS_PUBLISHED p on n.FLOWFORM_ID = p.FORM_ID
        join UC_FLOWFORMS_DATA d on d.PUBLISHED_FORM_ID = p.ID
        where n.CHOICES_LOV_CODES is not null and d.ID = :P16_FLOWFORM_DATA_ID;


    select json_arrayagg(json_object(n.NODE_NAME,n.LABEL)) into labelLUT from
        UC_FLOWFORMS_NODE n
        join UC_FLOWFORMS_PUBLISHED p on n.FLOWFORM_ID = p.FORM_ID
        join UC_FLOWFORMS_DATA d on d.PUBLISHED_FORM_ID = p.ID
        where d.ID = :P16_FLOWFORM_DATA_ID;


    select FORM_DATA into formdata from UC_FLOWFORMS_DATA where ID = :P16_FLOWFORM_DATA_ID;


    return '<script>var jData = ' || formdata
        || ';var labelLUT = new Map(('|| labelLUT || ').map(item => [item.NODE_NAME,item.LABEL[0].tl]))'
        || ';var choiceLUTJson = ' || choiceLUTJson
        || ';var choiceLUT = new Map(choiceLUTJson.map((k) => {
            return [k.NAME
                ,new Map(k.CODES.split(",").map((item,index)=> {
                return [item,k.VALUES.split(",")[index]];
                }
                ))
                ];
            }));'
        || ';</script>'
        ;
END;