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
});

tinyCoder · Accepted Answer · 2017-01-14T02:28:00.937

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!

edited Jan 14 '17 at 02:28

answered Jan 14 '17 at 01:48

tinyCoder

350
13
37

Yeah, you're right, I figured that out long ago. What intrigues me is that if I slap `console.log(json);` inside the function it just doesn't return anything when it runs. If I switch out the API to something else, it works fine. Another thing that is bothering me is that my json starts with the alphabet 'a' for some reason. I wonder if that has anything to do with it. – Rosenberg Jan 14 '17 at 01:53
Added the whole code as an edit to the main post, thanks. – Rosenberg Jan 14 '17 at 01:56
Oh shit, you're right. However, it still doesn't work. I feel I'm close to it. For my backend I'm using laravel, and I have absolutely **no idea** why it's outputting that a. What I'm sure of is that it's not reading it as json, maybe because of that `a`, or maybe because of a header? More likely because of that `a`. Will keep trying, thanks. – Rosenberg Jan 14 '17 at 02:43
If you'd like to share a live example of the exact situation, i'll be glad to help. – tinyCoder Jan 14 '17 at 03:39

Dom7 - getJson works but unable to transfer data

1 Answers1