Dom7 - getJson works but unable to transfer data

Question

I'm working on top of Urban Dictionary api example of Framework7.

This is the resulting JSON from the url (edit don't ask me why but it starts with an 'a'):

a{
  "bills": [
    {
      "id": 8,
      "name_id": "6",
      "category_id": 4,
      "isPaid": "Yes",
      "value": "190.00",
      "expiry": "2016-12-15 00:00:00",
      "created_at": "2017-01-04 15:44:00",
      "updated_at": "2017-01-04 15:44:00",
      "name": {
        "id": 6,
        "name": "Test1",
        "created_at": "2017-01-04 15:39:45",
        "updated_at": "2017-01-04 15:39:45"
      },
      "category": {
        "id": 4,
        "name": "System",
        "created_at": "2017-01-04 15:37:43",
        "updated_at": "2017-01-04 15:37:43"
      }
    }
  ]
}

This is the piece of code on my-app.js:

function getrandom() {
  // Get JSON Data from UrbanDictionary API 
  $$.getJSON('http://[privateurl]', function (json) {

// Insert rendered template
    $$('#content-wrap').html(compiledTemplate(json));
  });
};

I try to get the results by doing: console.log(getrandom());

I get: Undefined

It doesn't load my list.

              {{#each list}}
              <li>
                <a href="{{bill_id}}" class="item-link item-content external" target="_blank">
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">"{{bill_id}}"</div>
                      <div class="item-text">by {{value}}</div>
                    </div>
                  </div>
                </a>
              </li>
              {{/each}}

However, if I do this: console.log($$.getJSON('http://hiddenapiurl'));

I get results just fine.

edit: The actual urban dictionary api works normally. But mine doesn't for some reason.

EDIT2

Below is the whole code for my-app.js:

var myApp = new Framework7({});

var $$ = Dom7;

// Select Template
var template = $$('#random-template').html();

// Compile and render
var compiledTemplate = Template7.compile(template);

// Defined as function "getrandom"
function getrandom() {
  $$.getJSON('http://[privateurl]', function (json) {

    // Insert rendered template
    console.log(json);
    $$('#content-wrap').html(compiledTemplate(json));
  });
};


console.log($$.getJSON('http://[privateurl]'));

getrandom();

// Select Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');

// On refresh
ptrContent.on('refresh', function (e) {
  // Emulate 1s loading
  setTimeout(function () {

    // Execute getrandom to get new Definitions
    getrandom();

    myApp.pullToRefreshDone();
  }, 1000);
});


var mainView = myApp.addView('.view-main', {
  dynamicNavbar: true
});

Answer 1

First, getrandom() function does not have a return, that's why console.log(getrandom()) says Undefined!

Second, where did you select the template that you are compiling with compiledTemplate?

For example:

    var searchTemplate = $('#list-template').html();
    var compiledSearchTemplate = Template7.compile(searchTemplate);

    myApp.onPageInit('search', function (page) {
        // Just execute compiled search template with required content:
        var html = compiledSearchTemplate({/*...some data...*/});

        // Do something with html...
    });        

Please double check the Framework7 example.

EDIT 2:

Why are you saying each list while your json array name is bills? Try using each bills or each this.bills.

And the a that is bothering you because your json file has an a letter at the beginning of it!

Good luck man!