Instagram API: User ID naar Username

[RandyWoutenPlat]

Hoi,

Ik heb al eerder hier een aantal vragen gesteld m.b.t tot Virtual basics, maar dat is al weer een tijd terug. Nu heb ik een nieuw account aangemaakt omdat mij e-mail adres gestopt is.

OK, nu heb ik dus een vraag aan jullie.

Ik wil een simpele maps zelf maken, om mijn foto's van Instagram te zien op een kaart. Nu is mij dit al gelukt en wil naar de volgende stap, zoeken op een username en die foto's plotten op een kaart. Maar nu liep ik daarbij tegen een probleem aan. Ik kreeg het niet voor elkaar een user name uit een globale variabele te koppelen aan een User ID die ik haal uit de API van Instagram.(via deze link)
https://api.instagram.com/v1/users/...0625.f59def8.3b4cb81c15534569837377467c50be58

Hoe kan ik deze koppeling verzorgen?

Momenteel zoek ik nu via mijn User ID maar dat wil ik dus veranderen door een username in te vullen.

Dit is mijn code:

		// Na laden initializeren.
		$(document).ready(function() {
			initialize();
		})

		// glovale variabelen voor de Map:
			var infowindow;
			var nickname;

		function initialize(location) {
			// kaart opties, gecentreerd op Rotterdam

			
			var myOptions = {
			  center: new google.maps.LatLng(51.9217, 4.4811),
			  zoom: 12,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			// Nieuwe kaart aanmaken, gekoppeld aan div "map_canvas"
			var map = new google.maps.Map(document.getElementById("map_canvas"),
			    myOptions);

			// Info Window object aanmaken / klaarzetten
			infowindow = new google.maps.InfoWindow({
				content: ""
			});
			
			nickname = window.prompt('hoi');


$.ajax({
url:'https://api.instagram.com/v1/users/search?q='+ nickname+'&access_token=9900625.f59def8.3b4cb81c15534569837377467c50be58',
dataType: "jsonp",
success: function(objResponse)
{
console.log(objResponse);

}

});




  $.ajax({
		url:'https://api.instagram.com/v1/users/'+ nickname +'/media/recent/?access_token=9900625.f59def8.3b4cb81c15534569837377467c50be58',
		 		    dataType: "jsonp",
		 		    success: function(objResponse)
		 		     {
		 		      // Doe dingen.
		 		      
		 		   // Toon inhoud objResponse in de console 
		 		   console.log(objResponse);
					
					// Doe deze functie voor elk object
		 		      	$.each (objResponse.data, function()
		 		      	{
		 		      	
		 		      		var latlngpic = new google.maps.LatLng(this.location.latitude, this.location.longitude);
		 		      		console.log(latlngpic);
		 		      		
		 		      		var contentString = "<img src=" + this.images.low_resolution.url + ">";
		 		      			 		      				 		      		
		 		      		var marker = new google.maps.Marker({
		 		      		    position: latlngpic, 
		 		      		    map: map,
		 		      		    html: contentString 
		 		      		});
		 		    
	      		
		 		      		
		 		      		google.maps.event.addListener(marker, 'click', function() {
		 		      				infowindow.setContent(this.html)
		 		      				infowindow.open(map,this);
		 		      			});
		 		      		
		 		      		
		 		      		
		 		      	});
		 		      }          
		 		   });

		}

 

[Robin S]

Ik weet niet zeker of ik je vraag goed begrijp, maar ik doe een gok.

In de eerste ajax-request die ik zie wordt een username ingevuld. Uit het antwoord van die request wil je een (of meerdere, iik zie dat objResponse.data een array is) user-id halen, en die gebruiken in je tweede request gebruiken om te zoeken. Klopt dat?

Zo ja, dan moet je ten eerste wachten met die vervolg-zoekopdrachten tot de eerste klaar is, dus even code verplaatsen naar binnen de success-functie van de eerste request. De user-id's staan dan in objResponse.data.id, voor 0 <= i < objResponse.data.length (Of je kunt gewoon weer $.each gebruiken)

[JS]// Na laden initializeren.
$(document).ready(function() {
initialize();
})

// globale variabelen voor de Map:
var infowindow;
var nickname;

function initialize(location) {

// kaart opties, gecentreerd op Rotterdam
var myOptions = {
center: new google.maps.LatLng(51.9217, 4.4811),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Nieuwe kaart aanmaken, gekoppeld aan div "map_canvas"
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Info Window object aanmaken / klaarzetten
infowindow = new google.maps.InfoWindow({
content: ""
});

nickname = window.prompt('hoi');


$.ajax({
url: 'https://api.instagram.com/v1/users/search?q='+ nickname + '&access_token=9900625.f59def8.3b4cb81c15534569837377467c50be58',
dataType: "jsonp",
success: function(objResponse) {

console.log(objResponse);
// var exampleStructure = {
// "meta": {
// "code": 200
// },
// "data":[
// {
// "username": "lacebag",
// "bio":"After 6 years we're still enjoying our blog&forum for footwear&clothing fans. \r\nAnd just started to do distribution.\r\nKnowledge, dedication & love!",
// "website":"http:\/\/www.lacebag.nl",
// "profile_picture":"http:\/\/images.instagram.com\/profiles\/profile_25617120_75sq_1332106480.jpg",
// "full_name":"Lacebag.nl",
// "id":"25617120"
// }
// ]
// };

$.each(objResponse.data, function() {

console.log("Search: ", this.id);
$.ajax({
url:'https://api.instagram.com/v1/users/'+ this.id +'/media/recent/?access_token=9900625.f59def8.3b4cb81c15534569837377467c50be58',
dataType: "jsonp",
success: function(objResponse) {

// Doe dingen.
// Toon inhoud objResponse in de console
console.log(objResponse);

// Doe deze functie voor elk object
$.each (objResponse.data, function() {
var latlngpic = new google.maps.LatLng(this.location.latitude, this.location.longitude);
console.log(latlngpic);

var contentString = "<img src=" + this.images.low_resolution.url + ">";

var marker = new google.maps.Marker({
position: latlngpic,
map: map,
html: contentString
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html)
infowindow.open(map,this);
});
});
}
});
});

}
});

}[/JS]