What's the best way to load DB data as options into <select>?

💻 Development app dev
1

Hi,

I’m trying to load a client list consisting of id and name into a . I followed the app development tutorial to solve it with consintent code. As first step I added routes, controllers, mappers and services basically more copy and paste. Then I added a template in the part.content.php and created a short JS script based on the script in the tutorial. To keep it simple via testing for myself I started just getting the items as a simple list but nothing is displayed. Any help in solving this is aprecciated.

Here when running everything with the following code I truly get nothing but the things I already have . . . nor an error message in the logs or console.

HTML
{{#each clients}} <li class="client" data-id="{{ id }}"> <p>{{ name }}</p> </li> {{/each}}

JS

(function (OC, window, $, undefined) { 'use strict'; $(document).ready(function () { // this clients object holds all our clients var Clients = function (baseUrl) { this._baseUrl = baseUrl; this._clients = []; this._activeClient = undefined; }; Clients.prototype = { getAll: function () { return this._clients; }, loadAll: function () { var deferred = $.Deferred(); var self = this; $.get(this._baseUrl).done(function (clients) { self._activeClient = undefined; self._clients = clients; deferred.resolve(); }).fail(function () { deferred.reject(); }); return deferred.promise(); } }; // this will be the view that is used to update the html var View = function (clients) { this._clients = clients; }; View.prototype = { renderClients: function () { var source = $('#content-tpl').html(); var template = Handlebars.compile(source); var html = template({clients: this._clients.getAll()}); $('#editor').html(html); var entry = $(this).closest('.client'); }, render: function () { this.renderClients(); } }; var clients = new Clients(OC.generateUrl('/apps/ownclients/clients')); var view = new View(clients); clients.loadAll().done(function () { view.render(); }).fail(function () { alert('Could not load clients'); }); }); })(OC, window, jQuery);

Thanks!

Andy

2

You are probably better off asking in a web development forum since your issue seems to be more handlebars/js related than backend. Also the above code is formatted in a way that makes me not want to read it

3

I was hoping that the app dev forum would be the best place as the code is completely based on the appdev tutorial app. Due to some reason the complete formatting got lost in the thread.It’s easier to read in on github https://github.com/eventgineering/owncollab_timetracker

4

All I can really say is: Use your browser’s dev tools to check if you get the correct JSON. Then it’s only a question of:

  • is your data received
  • is your data rendered

Try to debug it with break points https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints

5

I believe, using the sample app has not been the best best way for me to solve this. Maybe you have a hint how to solve this with less complexity?

E.g. if I return the data in JSON with return new JSONResponse($params); . . . what is the easiest way simply to display the array in my content-template?

6

Okay . . . I am going a different way around.

7

Take the response, parse the template and pass in the response and then render the template by putting it into the Dom