Is it possible to create an empty multidimensional array in javascript/jquery?

Question

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.

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.

Gradation

Can you show us the response and what it looks like? That'll help significantly. – Hema

That's the response: pastebin.com/S5g2zwwD – Gradation

Answer 1

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.

Plotter

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... – Gradation

@Gradation you just specify an object and create values that are arrays. Then push the image url into the array. – Plotter

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. – Gradation

Also, I've found a function that can be used to set the dimensions of an empty multidimensional array. It might be useful to add this information as well. – Zolnay

Answer 2

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
...

Modulus

Answer 3

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/", ...],
    ...
//}

Eastnortheast

@Raynos: Well, it's basically what you do in your example. I stole your example to help demonstrate. :P – Eastnortheast

Answer 4

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] = [];
}

Voncile

Answer 5

Yes it is! I found this to be quite fast. I might stretch to say that it could be the fastest way possible to generate a N Dimensional array of Ns lengths resulting in empty arrays using JavaScript. (i.e. an arbitrary number of dimensions each with an arbitrary length)

Even though the definition of an array in JavaScript is foggy at best.

function createNDimArray(dimensions) {
    var t, i = 0, s = dimensions[0], arr = new Array(s);
    if ( dimensions.length < 3 ) for ( t = dimensions[1] ; i < s ; ) arr[i++] = new Array(t);
    else for ( t = dimensions.slice(1) ; i < s ; ) arr[i++] = createNDimArray(t);
    return arr;
}

Usages:

var arr = createNDimArray([3, 2, 3]); 
//  arr = [[[,,],[,,]],[[,,],[,,]],[[,,],[,,]]]
console.log(arr[2][1]); // in FF: Array [ <3 empty slots> ]
console.log("Falsy = " + (arr[2][1][0]?true:false) ); // Falsy = false

If you care to read more; check my answer to this question.

Isostasy

Answer 6

Yes, it's possible to have multidimensional arrays in javascript.

Here are one-liners for 5x5 matrix:

Array(5).fill(0).map(() => new Array(5).fill(0))

Or

[...Array(5)].map(x=>Array(5).fill(0))

Gash

Answer 7

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);

 });

Revelatory

Why bother with an undefined check. It's either an array or undefined. A simple !imageArray[item.tags] will do – Plotter

Answer 8

You can simply try this one for 2d js array:

let myArray = [[]];

Ungotten