Get JSON from Vine API with PHP and call it with Jquery Ajax

Question

I'm trying to build a Vine video feed from a certain users timeline. Because Vine does not offer an API, i'm using the unoffical Vine API wich works great!

The following URL for example, returns a JSON with the latest videos from a given Vine channel. https://api.vineapp.com/timelines/users/1127944909723439104?page=1&size=100

Now as far as i know (correct me if i'm wrong) is it not possible to access this JSON directly through an Jquery Ajax/getJSON call.

Because of that, i'm using PHP in combination with a Cronjob to fetch the JSON once a day from the URL and save it in a JSON file on my own server. I'm able to access then this saved JSON file by Jquery Ajax.

That's what i have right now:

PHP:

<?php   
file_put_contents("sbxvine.json", fopen("https://api.vineapp.com/timelines/users/1127944909723439104?page=1&size=100", 'r'));
?>

Jquery:

$(function(){
    $.getJSON( "sbxvine.json", function( data ) {           
        var getvines = data.data.records;
        for(var i = 0; i < getvines.length; i++){
            $('.vinefeed').append('<div class="item"><div class="content"><video width="100%" height="100%" src="' + getvines[i].videoUrl + '" poster="'+ getvines[i].thumbnailUrl+'" loop controls preload="none"></video></div></div>')
        }
    });
});

Now the problem here is, that i don't know what time the User is uploading new stuff each day, wich means, that the feed is not synced with the Vine channel. And firing a Cronjob every 5Minutes is not what i'm looking for.

So what i need is to get rid of all that Cronjob stuff and fetch the JSON live from the URL when the Ajax call requests it.

To achieve this, i tried doing this:

PHP:

<?php
    header('Access-Control-Allow-Origin: *'); 
    $json = file_get_contents('https://api.vineapp.com/timelines/users/1127944909723439104?page=1&size=100');
    $obj = json_decode($json,true);
    echo $obj;
?>

And then, with Jquery:

$(function(){
    $.ajax({
        url: 'getvines.php',
        dataType: 'json',
        type: 'GET',
        success: function(data) {
            console.log(data);
        },
        error: function(){
            console.log("nope");
        }
    });
});

Unfortunately, this is not working and i'm not sure what i'm doing wrong. It logs "nope" after one or two seconds.

Or is there a completely different solution to do all this in a better way?

Answer 1

Ahh stupid misstake, i just had to remove json_decode from the php because the URL already returns the JSON in the right format for the Ajax call.

Just an additional Question: Is this a good way to build this feed? What are the cons and what could be recommendations to enhance it (like make it fast as possible or "best practise" options)?