How to build URL from multi-dimensional object array with JavaScript?

Question

So the goal is to get a string like this:

somesite.com/-%20Luzon%20-/Bicol%20Region/Albay/Busay%20Falls/Busay_falls_10.jpg

So I started to build the object-array multi-dimensional thing and I'm not sure how you'd build the url using the name of the array groups.

    var photoArray   = {},
        islandGroups = ["- Luzon -", " - Visayas -", "-Mindanao-"],
        luzonRegions = ["Bicol Region", "Cagayan Valley", "Calabarzon", "CAR", "Central Luzon", "Ilocos Region", "Mimaropa"],
        bicolProvinces = ["Albay", "Camarines Norte", "Camarines Sur", "Catanduanes", "Masbate", "Sorsogon"],
        albayProvinceTravelDestinations = ["Busay Falls", "Hoyop-Hoyopan Cave", "Lignon Hill", "Malabsay Falls", "Mt Mayon", "Panicuason Hot Spring Resort", "Vera Falls"];
        busayFallsPhotoPattern = ["Cover, Busay_falls_"];
        busayFallsPhotoPatternID1 = [""];
        busayFallsPhotoPatternID2 = ["1", "1_2", "10", "2", "2_2", "3", "3_2", "4", "4_2", "6", "7", "8", "9"];
        baseURL = "somesite.com";
    /* build sub-array */
    var islandGroupsArrayLength = islandGroups.length;
    for (var i = 0; i < islandGroupsArrayLength; i++) {
      photoArray[islandGroups[i]] = {};
    }
    var luzonRegionsLength = luzonRegions.length;
    for (var i = 0; i < luzonRegionsLength; i++) {
      photoArray["- Luzon -"][luzonRegions[i]] = {};
    }
    var bicolProvincesLength = bicolProvinces.length;
    for (var i = 0; i < bicolProvincesLength; i++) {
      photoArray["- Luzon -"]["Bicol Region"][bicolProvinces[i]] = {};
    }
    var albayProvinceTravelDestinationsLength = albayProvinceTravelDestinations.length;
    for (var i = 0; i < albayProvinceTravelDestinations; i++) {
      photoArray["- Luzon -"]["Bicol Region"]["Albay"][i] = {};
    }
    /* build string before converting space to %20% */
    /*
    busayFallsPhotoPattern = ["Cover, Busay_falls_"];
        busayFallsPhotoPatternID1 = [""];
        busayFallsPhotoPatternID2 = ["1", "1_2", "10", "2", "2_2", "3", "3_2", "4", "4_2", "6", "7", "8", "9"];
    */
    var busayFallsPhotoPatternLength = busayFallsPhotoPattern.length,
        busayFallsPhotoPatternID2Length = busayFallsPhotoPatternID2.length;
    /* setup photoURLs array */
    photoArray["- Luzon -"]["Bicol Region"]["Albay"]["Busay Falls"] = {};
    photoArray["- Luzon -"]["Bicol Region"]["Albay"]["Busay Falls"]["busayFallsPhotoURLs"] = {};

    photoArray["- Luzon -"]["Bicol Region"]["Albay"]["Busay Falls"]["busayFallsPhotoURLs"][0] = "Cover" + ".jpg";

    console.log(photoArray.[0].[0].[0].[0].[0].[0]); // this doesn't work

Probably obvious, my mind is kind of overwhelmed at the moment

I'm also wondering how to build this more efficiently / use pointers so you don't have a superLongNameLength for example.

Edit:

I think I know what's wrong, first you don't concatinate with . in JavaScript that's PHP and also I think I have to sequentially append each piece to a string to get the url after turning spaces into %20 but I'm still not sure if this is the best way to do this.

This is closer but still wrong/verbose, I'm getting the last entry which makes sense as they all have the same name.

var islandGroups = ["- Luzon -", "- Visayas -", "-Mindanao"],
    regions     = {
      "- Luzon -" : "Bicol Region", 
      "- Luzon -" : "Cagayan Valley",
      "- Luzon -" : "Calabarzon",
      "- Luzon -" : "CAR",
      "- Luzon -" : "Central Luzon",
      "- Luzon -" : "Ilocos Region",
      "- Luzon -" : "Mimaropa"
    },
    provinces = {
      "Bicol Region" : "Albay",
      "Bicol Region" : "Camarines Norte",
      "Bicol Region" : "Camarines Sur",
      "Bicol Region" : "Catanduanes",
      "Bicol Region" : "Masbate",
      "Bicol Region" : "Sorsogon"
    },
    travelDestinations = {
      "Albay" : "Busay Falls",
      "Albay" : "Hoyop-Hoyopan Cave",
      "Albay" : "Lignon Hill",
      "Albay" : "Malabsay Falls",
      "Albay" : "Mt Mayon",
      "Albay" : "Panicuason Hot Spring Resort",
      "Albay" : "Vera Falls"
    },
    photos = {
      "Busay Falls" : "Cover.jpg",
      "Busay Falls" : "Busay_falls_10.jpg",
      "Busay Falls" : "Busay_falls_2.jpg",
      "Busay Falls" : "Busay_falls_3.jpg",
      "Busay Falls" : "Busay_falls_4.jpg",
      "Busay Falls" : "Busay_falls_5.jpg",
      "Busay Falls" : "Busay_falls_6.jpg",
      "Busay Falls" : "Busay_falls_7.jpg",
      "Busay Falls" : "Busay_falls_8.jpg",
      "Busay Falls" : "Busay_falls_9.jpg"
    };

    console.log(islandGroups[0]+regions["- Luzon -"]+provinces["Bicol Region"]+travelDestinations["Albay"]+photos["Busay Falls"]);

Please read this and learn how objects work in JavaScript before going any further: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — J. Titus
– J. Titus, Commented Dec 2, 2016 at 19:45
@J.Titus is 100% right, you need to stop what you're doing and learn how JS objects work. The mention of pointers specifically tells me you're thinking in a very different language (C++, I'd assume) and that means you're never going to get anywhere without some visits to the Mozilla Developer Network (developer.mozilla.org/en-US) to check out their JS reference. — gelliott181
– gelliott181, Commented Dec 2, 2016 at 19:52
@J.Titus actually there is a command by Cloudinary specifically to do this but I need Node.js also my method is dumb because you need to know what's in the folders. But yes I still don't know what the hell I'm doing is the bottom line. — Jacob David C. Cunningham
– Jacob David C. Cunningham, Commented Dec 2, 2016 at 20:27

Mauricio Poppe · Accepted Answer · 2017-04-23 22:00:36Z

1

Since you have n arrays with each having a variable number of items, the best you can do is pick one element of each array recursively as follows:

const lower = ['a', 'b', 'c'] 
const upper = ['X', 'Y', 'Z']
const numbers = [1, 2, 3]

const all = [lower, upper, numbers]

// all = a 2d array
// current = the i-th array of `all` we're currently operating on
// result = the concatenated string
function combination(all, current = 0, result = '') {
  if (current == all.length) {
    console.log(result)
    return
  }
  for (let i = 0; i < all[current].length; i += 1) {
    // concatenate a new string from the i-th array
    combination(all, current + 1, result + all[current][i] + '/')
  }
}

combination(all)

Applying the algorithm above to your strings requires some modifications:

the base url should be the first array
the result should be encoded

const baseURL = ["somesite.com"];
const islandGroups = ["- Luzon -", " - Visayas -", "-Mindanao-"];
const luzonRegions = ["Bicol Region", "Cagayan Valley", "Calabarzon", "CAR", "Central Luzon", "Ilocos Region", "Mimaropa"];
const bicolProvinces = ["Albay", "Camarines Norte", "Camarines Sur", "Catanduanes", "Masbate", "Sorsogon"];
const albayProvinceTravelDestinations = ["Busay Falls", "Hoyop-Hoyopan Cave", "Lignon Hill", "Malabsay Falls", "Mt Mayon", "Panicuason Hot Spring Resort", "Vera Falls"];
const busayFallsPhotoPattern = ["Cover", "Busay_falls_"];
const busayFallsPhotoPatternID2 = ["1", "1_2", "10", "2", "2_2", "3", "3_2", "4", "4_2", "6", "7", "8", "9"];

// all = a 2d array
// current = the i-th array of `all` we're currently operating on
// result = the concatenated string
function combination(all, current = 0, result = '') {
  if (current == all.length) {
    // add extension
    console.log(result + '.jpg')
    return
  }
  for (let i = 0; i < all[current].length; i += 1) {
    // concatenate a new string from the i-th array
    let newString = encodeURI(result + all[current][i])
    // empty string shouldn't have /
    // when current >= all.length - 2 we shouldn't add /
    if (all[current][i] && current < all.length - 2) { newString += '/' }
    combination(all, current + 1, newString)
  }
}

combination([
  baseURL,
  islandGroups,
  luzonRegions,
  bicolProvinces,
  albayProvinceTravelDestinations,
  busayFallsPhotoPattern,
  busayFallsPhotoPatternID2
])

edited Apr 23, 2017 at 22:00

answered Apr 23, 2017 at 7:04

Mauricio Poppe

4,8861 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jacob David C. Cunningham Over a year ago

Wow your answer is nuts to me (not in a bad way) a few new things like const and the combination function you wrote... I figured out my problems already in the past I just saw this when trying to find a question I asked.

Jacob David C. Cunningham Over a year ago

Thank you for your response I think it answers the question according to what I originally asked.

Jacob David C. Cunningham Over a year ago

Also it turns out Cloudinary outputs the results and I just wrote some scripts to "scrape" the content and sort them/cache them server-side to save on API requests.

Jacob David C. Cunningham · Accepted Answer · 2017-04-23 06:36:50Z

1

Yeah so definitely completely wrong there, the keys are the same... so instead of for example:

photos = {
  "Busay Falls" : "Cover.jpg",
  "Busay Falls" : "Busay_falls_10.jpg",
  "Busay Falls" : "etc..."
}

It should be

photos = {
  "busay_falls":[
    "Cover.jpg",
    "Busay_falls_10.jpg",
    "etc..."
  ]
}

then you can build the url by going through the indexes of the arrays

like for the photos case here:

photos.busay_falls[0] // becomes Cover.jpg

answered Apr 23, 2017 at 6:36

Jacob David C. Cunningham

6112 gold badges7 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to build URL from multi-dimensional object array with JavaScript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related