Collection data to html page - template?

General
1

Ultimately, I’m trying to just display collection records in a page.

I was hoping someone can help with a simple template for putting cockpit collection data on an html page.

The most I could get was this snippet which shows desired results as ‘entries:’ in the console log.

<script type="text/javascript">
fetch('./api/collections/get/[collection_name]?token=[token]', {
   method: 'post',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify()
})
.then(res => res.json())
.then(res => console.log(res))

</script>

If someone can further assist by putting all the collection records in a div on the page that would be helpful. The ability to access each field individually for formatting purposes would be ideal.

2

I recommend using some js frontend lib like vue.js or react for this. Those libs are predestinated for your purpose.

You can also take a look at this great example: Cockpit + React Static Demo Project

If you are interested in using vue, here is a concrete very simple example for using vue.js to render js data-objects into html (in this case we render li’s instead of your desired div layers but that should really not be the problem): https://vuejs.org/v2/examples/tree-view.html

Another example:

<div id="app">
   <ol>
    <li v-for="item in items">
       {{ item.name }}
    </li>
   </ol>
</div>
<script>
var app = new Vue({
   el: '#app',
   data: {
     items: [
       { name: 'Vue js' },
       { name: 'Angular js' },
       { name: 'React js' }
     ]
   }
 });
 </script>

– taken from here: https://medium.com/covenant-university-developers-community/building-a-simple-data-filtering-app-with-vue-js-521420c73899

=> You would just need to exchange the static defined data with your api-returned data using the created function which would need to contain your ajax/api request.

It should look something like this (untested):

<div id="app">
   <ol>
    <li v-for="item in items">
       {{ item.name_of_the_field_you_would_like_to_print }}
    </li>
   </ol>
</div>

<script>
var app = new Vue({
   el: '#app',
   data: {
     items: []
   },
   created : function() {
        fetch('./api/collections/get/[collection_name]?token=[token]', {
           method: 'post',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify()
        })
        .then(res => this.items = res)
   }
 });
 </script>