Rendering text in a block

Re : ‘Get Current User API’ (video 15) from ‘Backendless User Management’ course

I’m interested in the ‘magic’ that occurs (4:20) to display the data returned by ‘Get current user’ as text in userViewBlock. In other words, what code might be in the Custom Code block ‘name’?

Hi Jim,

This is the code that goes into the Custom Code block:

   json = JSON.stringify(json, undefined, 4).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        return '<span class="' + cls + '">' + match + '</span>';
   component.el.innerHTML =  `<pre> ${json} </pre>`

Make sure to define the json and component arguments:

Hope this helps.


Thanks Mark, this gives me something to work with. I realized the Custom Code block is a good ‘natural’ way to learn more about JavaScript, so I’ve been looking at/working with snippets here and there. Looks like the upper lines are parsing/cleaning up the object ‘Get current user’ returns into proper JSON format; I can work my way through that.

I’d say the last line puts the ‘clean’ JSON into the UI block (for me not a usual place to directly put code). The ‘.el.innerHTML’ property(?) of the component (ID fed in through ‘component’ argument) seems to be ‘where’ the JSON is going; will do some (JavaScript) research on that.
Appreciate the response!