External js Data

Questions
1

Hi

I have a components page. All the data is in a a js file called data.js. Everything is working fine.

However I was wandering if it is possbile to call the data.js file from another source (external url).

I wanted to do this because we have data that constantly changes, and since I am building an app I don’t see another way of pushing this fresh data constantly.

R

2

Would be good to see some more detailed example of what you are trying to achieve

1 Like
3

Thanks for your quick reply.

I used the tab example as a base.

Then I created a file called data.js.

function mydata () {
  return {
    user: [{
      userid: '1',
          },
          {
            userid: '2',
                }
    ],
    // Demo products for Catalog section
    products: [
     {
        id: '1',
        title: 'Apple iPhone 8',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.',
        image: 'https://www.b.com/Images/logo.png',
        logo: 'https://www.findit.com.mt/dynimage/voucher-logo/13579/test2.png',......

This is called in index.html
<!-- Your custom app scripts -->

<script src="js/data.js"></script>

In app.js

I have:
var thisdata = mydata();

// Framework7 App main instance
var app  = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  
  // App root data
  data: mydata()....

Then in catalog.html I call the fields:

<li class="item-content">
              <div class="card demo-facebook-card">
                  <div class="card-header">
                    <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
                    <div class="demo-facebook-name item-title">{{title}}</div>
                    <div class="demo-facebook-date item-title">{{cat}}</div>
                    </div>
                  <div class="card-content"> <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/></div>
                  <div class="card-content card-content-padding item-text"> {{description}}</div>
                  <div class="card-footer"><a href="/product/{{id}}/" class="link">Use Voucher</a>
            

       </li>

Hope this clrfies things.

What i Wanted to do is instead of calling /js/data.js I would call mydomain/js/data.js

Regards

Rob

4

Host your js in your server as you said in the previous post.
Sry if this dosnt make sense. But i dont fully understand what you need.

5

I tried to call mydomain .com/data.js in index.html but somehow the data was not being read.

6

Any error in the console? Maybe CORS?

7

Have to check. Might make sense.

Thanks. Will revert.

8

Hi apologies for taking long to reply.

I tried again and it now seems to work fine. Might have been a type or something similair.

1 Like