# Collection data to html page - template?

**URL:** https://discourse.getcockpit.com/t/collection-data-to-html-page-template/706
**Category:** General
**Created:** [April 3, 2019, 3:31pm UTC](https://discourse.getcockpit.com/t/collection-data-to-html-page-template/706 "2019-04-03T15:31:24Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![stealthsepa](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@stealthsepa](https://discourse.getcockpit.com/u/stealthsepa)
#### Post date: [April 3, 2019, 3:31pm UTC](https://discourse.getcockpit.com/t/collection-data-to-html-page-template/706/1 "2019-04-03T15:31:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![serjoscha87](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/serjoscha87/32/151_2.png) [@serjoscha87](https://discourse.getcockpit.com/u/serjoscha87)
#### Post date: [April 3, 2019, 6:51pm UTC](https://discourse.getcockpit.com/t/collection-data-to-html-page-template/706/2 "2019-04-03T18:51:00Z")

</div>

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](https://discourse.getcockpit.com/t/cockpit-react-static-demo-project/356)

* * *

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](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](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>
```