Kako se koristi JSON iz url-a?

Programiranje
1

Dobar dan, moze li mi neko objasniti kako da koristim JSON iz nekog url-a , koristeći recimo jQuery, mada i ne mora biti strogo jquery.

Naime instagram JSON url izgleda ovako:

http://api.instagram.com/oembed?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba
i isti generiše:

{"provider_url": "https://www.instagram.com", "media_id": "1396834592148782706_20824486", "author_name": "nba", "height": null, **"thumbnail_url": "https://instagram.fbeg1-1.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/15306091_1839341069683393_6021558846370086912_n.jpg?ig_cache_key=MTM5NjgzNDU5MjE0ODc4MjcwNg%3D%3D.2"**, "thumbnail_width": 640, "thumbnail_height": 640, "provider_name": "Instagram", "title": "The @chicagobulls defeat the @cavs 111-105 on @dwyanewade's 24p, 5r \u0026 4a.", "html": "\u003cblockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"\u003e\u003cdiv style=\"padding:8px;\"\u003e \u003cdiv style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;\"\u003e \u003cdiv style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cp style=\" margin:8px 0 0 0; padding:0 4px;\"\u003e \u003ca href=\"https://www.instagram.com/p/BNijakrAX5y/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_blank\"\u003eThe @chicagobulls defeat the @cavs 111-105 on @dwyanewade\u0026#39;s 24p, 5r \u0026amp; 4a.\u003c/a\u003e\u003c/p\u003e \u003cp style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"\u003eFotografiju objavljuje NBA (@nba) \u003ctime style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2016-12-03T03:28:01+00:00\"\u003ePro 2, 2016 u 7:28 PST\u003c/time\u003e\u003c/p\u003e\u003c/div\u003e\u003c/blockquote\u003e\n\u003cscript async defer src=\"//platform.instagram.com/en_US/embeds.js\"\u003e\u003c/script\u003e", "width": 658, "version": "1.0", "author_url": "https://www.instagram.com/nba", "author_id": 20824486, "type": "rich"}

Ja hoću da koristeći instagram JSON linkove, recimo:

http://api.instagram.com/oembed?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba
http://api.instagram.com/oembed?url=https://www.instagram.com/p/BNihBBhAxl-/?taken-by=nba
http://api.instagram.com/oembed?url=https://www.instagram.com/p/BNiT1tcgyMS/?taken-by=nba
http://api.instagram.com/oembed?url=https://www.instagram.com/p/BNhK53ngdgs/?taken-by=nba
http://api.instagram.com/oembed?url=https://www.instagram.com/p/BNgCFtzAl6_/?taken-by=nba

iz svakog od navedenih linkova izvučem "thumbnail_url"

i da se to u html-u prikaze jednostavno kao: <div id=""slike"><img src="url slike iz JSON-a iz 1 linka" /> <img src="url slike iz JSON-a iz 2 linka" /> <img src="url slike iz JSON-a iz 3 linka" /> <img src="url slike iz JSON-a iz 4 linka" /> <img src="url slike iz JSON-a iz 5 linka" /></div>

NAPOMENA: Broj linkova tj. slika koje zelim povući sa instagrama nije fixni, tj. nekada će to biti 5 linkova/slika, nekada 10 , 15 …

Krajnji cilj mi je da jednostavno preuzmem određene slike sa nekog instagram profila koristeći http://api.instagram.com/oembed?url= kako bih dosao do url-a slike, i da iste iste prikazem u html-u …

Nadam se da sam uspio objasniti sta zelim , i da ce mi neko pomoci,

Hvala unaprijed i lijep pozdrav,
Jasmin

2

Ovako mozda ?

https://jsbin.com/miwuqarife/edit?html,js,console,output

Napomena koristio sam ES2015 Template strings - ES2015 sam po sebi jos nije zastupljen u svim verzijama pretrazivaca (npr u IE ne radi nikako), pa ces trebati transpiler npr Babel, ili ako neces ici sa template strings mozes raditi concat sa + ako ne znas kako se radi, napisi pa ti objasnim.

Btw let keyword je iz ES2015 takodjer.

1 Like
3

Davno sam radio sa JSON i ovo je radilo ovako nesto…

<script>

function Get(yourUrl){
var Httpreq = new XMLHttpRequest(); // a new request
Httpreq.open("GET",yourUrl,false);
Httpreq.send(null);
return Httpreq.responseText;          

    }

var url="https://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/"; // document.getElementById("url").value;

function thumb(){

var json_obj = JSON.parse(Get(url));
console.log("thumb--->"+json_obj.thumbnail_url);
}

</script>

a na google mozes naci 100 rjesenja za tvoj problem :wink:

1 Like
4

Da li bi ovo što si napravio radilo u modernim browserima ? (btw svakako cu testirati) ,

Nisam uopšte upućen u ovo što si koristio “ES2015 Template strings”, čak šta više prvi put čujem, ali ovo je upravo ono što zelim da napravim.

Pitanje je sad, kako bi izgledao jQuery kod da se ne koriste ovi “ES2015 Template strings”, jer ako bi nešto trebau “sutra” mijenjati, bojim se da bi lakše razumio jQuery čist , jer njega bar malo nešto znam…

U svakom slučaju hvala na trudu, mislim da će mi ovo biti korisno!

Pozdrav

EDIT:
Koliko vidim ne radi mi u IE kao što si i rekao, kod je prilično jednostavan za mene, ali IE i ostali moderni browseri su mi MUST HAVE, pa te molim da mi objasniš kako da ovo uradim koristeći čisti jQuery kod koji bi radio u modernim browserima. Izvinjavam se ako se pogrešno izražavam u vezi nekih stvari, učim u hodu pa nailazim na ovakve probleme.

5

Radilo bi kada bi koristio transpiler koji ce taj ES2015 kod konvertovati nazad u ES5.Ispod je ES5 primjer koji ce raditi u vecini browsera, bez transpilera

var urls = [
  'https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNhK53ngdgs/?taken-by=nba', 
  'https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNiT1tcgyMS/?taken-by=nba'
];

for(i=0; i<urls.length; i++) {
  $.ajax({
	url: urls[i],
	dataType: 'jsonp',
	type: 'GET',
	data: {},
	success: function(data){
       $('#images').append('<div><img src="'+data.thumbnail_url+'"></div>');
	},
	error: function(data){
		console.log(data);
	}
  });  
}
7

IE restricted this webpage from running scripts or ActiveX controls. - Naravno kada odobrim radi kao u Crome-u.

Da li je to uredu? mogu li izbjeći ovo upozorenje ili je mozda moj IE zastario?

8

Baci pogled na ovo

1 Like
9

Hoću, hvala puno na iscrpnoj pomoći.

Pozdrav