Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I am trying to create a very basic Flickr gallery using the Flickr API. What I want to achieve is sorting my pictures by tag. What I am using is jQuery.getJSON() so that I can parse the API response of [flickr.photosets.getPhotos] (http://www.flickr.com/services/api/flickr.photosets.getPhotos.htm).

The data I am interested in getting from Flickr is the tag and the URL associated to each photo. The problem with this is that the only logical way out of this for me is creating a multidimensional array of the following format:

Array['tag1'] => ['URL_1', 'URL_2', 'URL_3', 'URL_n'];

However, I cannot find any way to achieve this. My code looks like this:

$.getJSON('http://api.flickr.com/services/rest/?api_key=xxx&method=flickr.photosets.getPhotos&user_id=xxx&format=json&extras=tags%2C+url_l%2C+url_sq&nojsoncallback=1&photoset_id=xxx', 
   function(data) {

     var imageArray = [];   
     $.each(data.photoset.photo, function(i, item) {

       imageArray[item.tags] = [item.url_sq,];

     });
});

I am aware that the code might look awkward, but I've tried everything and there's no way I can figure this out.

Any help is greatly appreciated.

Thanks for your time! :)

share|improve this question
Can you show us the response and what it looks like? That'll help significantly. – g.d.d.c Sep 22 '11 at 21:37
That's the response: pastebin.com/S5g2zwwD – finferflu Sep 22 '11 at 21:40

5 Answers

up vote 1 down vote accepted 
var arr = [];
arr[0] = [];
arr[0][0] = [];
arr[0][0][0] = "3 dimentional array"

Multi dimentional arrays have a lot of gaps unless they are used properly. A two dimensional array is called a matrix.

I believe your data contains a space seperate string called "tags" containing the tags and a single url.

var tagObject = {};
data.photoset.photo.forEach(function(val) {
  val.tags.split(" ").forEach(function(tag) {
    if (!tagObject[tag]) {
      tagObject[tag] = [];
    }
    tagObject[tag].push(val.url_sq);
  });
});
console.log(tagObject); 
/*
  {
    "sea": ["url1", "url2", ...],
    "things": ["url4", ...],
    ...
  }
*/

I don't know how it returns multiple tags.

share|improve this answer
My problem with this is that I cannot specify the array index explicitly. I can only use the variables provided by the each() loop. I would need to declare that the array is multidimensional outside of the loop, when nothing has been yet assigned to it. I hope that makes sense... – finferflu Sep 22 '11 at 21:44
@finferflu you just specify an object and create values that are arrays. Then push the image url into the array. – Raynos Sep 22 '11 at 21:44
That's it! Thanks a lot :) My response was directed to your original comment, that's why it doesn't make much sense in relation to your last edit. – finferflu Sep 22 '11 at 22:06
up vote 1 down vote

I think the syntax you are attempting to achieve is something like the following:

var item = {"tags":"blah","url_sq":"example.com"}; // for sake of example.
var imageArray = [];
$.each(data.photoset.photo, function(i, item) {
   imageArray.push({"tags":item.tags,"url":item.url_sq});
});

and then reference it like this:

imageArray[0].tags
imageArray[0].url
imageArray[1].tags
imageArray[1].url
...
share|improve this answer
up vote 1 down vote

JavaScript doesn't have true multidimensional arrays (heck, it doesn't even have true regular arrays...), but, like most languages, it instead uses arrays of arrays. However, to me it looks like you need an object (kinda similar to PHP's arrays) containing arrays.

var data = {
    tag1: ['URL_1', 'URL_2', 'URL_3', 'URL_n']
};
// Then accessed like:
data.tag1; // ['URL_1', ...]
data.tag1[0]; // 'URL_1'
data.tag1[1]; // 'URL_2'
// etc.

So, you're problem would look something like this:

var tags = {};
$.each(data.photoset.photo, function (i, item) {
    $.each(item.tags.split(" "), function (i, tag) {
        if (!tags[tag])
            tags[tag] = [];
        tags[tag].push(item.url_sq);
    });
});
// tags is now something like:
// {
    "foo": ["/url.html", "/other-url/", ...],
    "bar": ["/yes-im-a-lisp-programmer-and-thats-why-i-hypenate-things-that-others-might-underscore-or-camelcase/", ...],
    ...
//}
share|improve this answer
Doesnt really help solve the problem – Raynos Sep 22 '11 at 21:53
@Raynos: Well, it's basically what you do in your example. I stole your example to help demonstrate. :P – alpha123 Sep 22 '11 at 23:29
up vote 0 down vote

Maybe something like that in your "each":

if ( imageArray[item.tags] != null ){ imageArray[item.tags][imageArray[item.tags].length] = item.url_sq; }else{ imageArray[item.tags] = []; }

share|improve this answer
up vote 0 down vote

I think something like this should do what you want

 var imageArray = [];   

 $.each(data.photoset.photo, function(i, item) {

   // if the tag is new, then create an array
   if(!imageArray[item.tags])
     imageArray[item.tags] = [];

   // push the item url onto the tag
   imageArray[item.tags].push(item.url_sq);

 });
share|improve this answer
Why bother with an undefined check. It's either an array or undefined. A simple !imageArray[item.tags] will do – Raynos Sep 22 '11 at 21:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.