How to access the 'data' provided by an API rendering request?

sahl04

Hi all,

we are just starting with jsreport and facing a problem now.
Currently we are loading (test) data from a local JSON file.
In the next step we like to call the API for the report to be rendered.
Imagine the following body in the API call.

   { 
      "template": { "shortid" : "g1PyBkARK"  },
      "data" : { "Message" : "Hello World!" },
      "options": { "timeout": 60000 }
   }

How can we access the 'data' as a JavaScript object within the report Definition?

Perhaps you can give a link or a short code snippet.

Best regards
Dirk

bjrmatos

How can we access the 'data' as a JavaScript object within the report Definition?

i don't fully understand this, do you want to access the data that you are sending inside the template or something else?

sahl04

Exactly, i want to access the data in the template.
I just viewed 'Deep dive into jsreport' on YouTube.
Is this the right approach?

    <script>
        var data = [];
        
        data.push({{Message}});
    </script>

bjrmatos

ok, i see now what you want.

about your problem, using data.push({{Message}}) remember that {{Message}} outputs the raw message so in the end your template has this:

<script>
    var data = [];
    
    data.push(Hello World!);
</script>

which is not valid JS.

to solve this use this example as a reference. i also included in the example code that will help you see what is the html that is going to be converted to pdf, to see that html just click "Debug" button in studio. hope it helps you

sahl04

Your solution is very close, containing already that what i need!

<script>
    var dataEl = document.getElementById('data-serialized')
    var data = JSON.parse(dataEl.innerText);
</script>

But there is still an issue.
If i call the template containing this

    <script>
        var dataEl = document.getElementById('data-serialized')
        
        if(dataEl === undefined)
        {
            document.write("dataEl is undefined");
        }
        
        if(dataEl === null)
        {
            document.write("dataEl is null");
        }
    </script>

over API, the document shows 'dataEl is null'.
What is happening now?

bjrmatos

What is happening now?

hmm not sure, i tried the example in studio and api and it worked everytime.

it would be better if you provide a minimal example of your template here: https://playground.jsreport.net so we can probably find what is wrong in your template. create an example in playground, save it, and share the link to it here.

sahl04

This is the minimal template, very similar to your example but just adding some ifs.

https://playground.jsreport.net/studio/workspace/HkLP_eNqM/2

Perhaps your example works fine from API because there is sample data defined.

bjrmatos

your example does not have the same html of mine, take a deep look

<div id="content">
</div>
<span id="data-serialized" style="display: none;">{{serialize .}}</span>
<script>
    var dataEl = document.getElementById('data-serialized')
    var mainData = JSON.parse(dataEl.innerText)
    var data = [];
    
    data.push(mainData.Message);
    
    document.getElementById('content').innerText = "Data is: " + JSON.stringify(data)
</script>

you are missing the span with data-serialized id

bjrmatos

Perhaps your example works fine from API because there is sample data defined.

no, your example does not work because you don't have the neccesary html elements of my example to make it work, in this case it does not matter if the data is sample or from api, it will always end up in template the same way

sahl04

Everything works fine now following your example.
Thank you very much for your kind support!