I am trying to do this on client side using JavaScript.
Question: How to access JSON stored within https://www.instagram.com/xsolvesoftware/media/ with JavaScript and turn it into Object?
I tried xmlHttpRequest
function httpGet(theUrl)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}
var data = httpGet("https://www.instagram.com/xsolvesoftware/media/");
console.log(data);
I have tried loading it with src but it obviously doesn't work as it works only on content inside of tags:
var jsonData = JSON.parse(document.getElementById('data').textContent)
<script id="data" type="application/json" src="https://www.instagram.com/xsolvesoftware/media/">
</script>
I have tried editing this example but it uses JSONP not JSON as a reply and i think i would get JSONP only if i would use registered with access to users content:
var token = '1362124742.3ad74ca.6df307b8ac184c2d830f6bd7c2ac5644',
num_photos = 10,
container = document.getElementById( 'rudr_instafeed' ),
scrElement = document.createElement( 'script' );
window.mishaProcessResult = function( data ) {
for( x in data.data ){
container.innerHTML += '<li><img src="' + data.data[x].images.low_resolution.url + '"></li>';
}
}
scrElement.setAttribute( 'src', 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + token + '&count=' + num_photos + '&callback=mishaProcessResult' );
document.body.appendChild( scrElement );
<ul id="rudr_instafeed"></ul>