Tridimensional array solution javascript

Question

I am reading information from a database and I want the following structure: continent->Country->City. I am getting the data throughout PHP. I want to store that data in a tridimensional javascript array (or atleast that is what i am trying to do since yesterday).

I don't know if the following is posible:

var triArray[0] = ["Africa"];
var triArray[0][0] = ["Niger"];
var triArray[0][0][0] = ["Abuya"];

The idea is to make those arrays through PHP and use the data to fill them.

I "need" (I think, I am not and expert) a tridimensional to then see which city belongs to which country and where that country is located, using a for loop.

<ul
   <li>Africa
       <ul>
          <li>Niger
              <ul>
                  <li>Abuya</li>
              </ul>
          <li>
       </ul>
   </li>
</ul>

I don't know if you get what I want, thanks in advance.

Are you asking how to create the tridimensional array in PHP, or just how to loop through it in JavaScript? Or both? — Wet Noodles
– Wet Noodles, Commented Jan 20, 2015 at 17:15
Hello, what I want is how to build that tridimensional array to contain the information above. Or something that solves my problem, doing it with a bidimensional array. — Veslor
– Veslor, Commented Jan 20, 2015 at 17:18
It seems to me that an object would make more sense than an array... — sebnukem
– sebnukem, Commented Jan 20, 2015 at 17:20

Niet the Dark Absol · Accepted Answer · 2015-01-20 17:26:50Z

Consider a more object-oriented approach - this should be easy, since continents/countries/cities are things.

function Continent(name) {
    this.name = name;
    this.countries = [];
}
Continent.prototype.addCountry = function(country) {
    if( !(country instanceof Country)) throw new Error("Not a country");
    this.countries.push(country);
    // may want to add logic for duplicate checking
}

You can build function Country and function City in a similar way.

Now that that's done, and you've built your structure, you can output it. Maybe something like:

Continent.prototype.toString = function() {
    var list = "<li>" + this.name,
        l = this.countries.length, i;
    if( l > 0) {
        list += "<ul>";
        for( i=0; i<l; i++) {
            list += this.countries[i]; // toString implicitly called
        }
        list += "</ul>";
    }
    list += "</li>";
    return list;
}

Add similar functions to Country and City.

Now you can output the continent, say in someULelement.innerHTML, and it will render as desired.

You may want to have a function World to act as an overall container.

Object-oriented code can make tasks like this much easier to understand visually.

// ------------------ BEGIN CLASS DEFINITIONS ---------------------

function World() {
  this.continents = [];
}
World.prototype.addContinent = function(continent) {
  if (!(continent instanceof Continent)) throw new Error("Not a continent");
  this.continents.push(continent);
}
World.prototype.toString = function() {
  var list = "<ul>",
    l = this.continents.length,
    i;
  if (l > 0) {
    for (i = 0; i < l; i++) {
      list += this.continents[i]; // toString implicitly called
    }
  }
  list += "</ul>";
  return list;
}

function Continent(name) {
  this.name = name;
  this.countries = [];
}
Continent.prototype.addCountry = function(country) {
  if (!(country instanceof Country)) throw new Error("Not a country");
  this.countries.push(country);
  // may want to add logic for duplicate checking
}
Continent.prototype.toString = function() {
  var list = "<li>" + this.name,
    l = this.countries.length,
    i;
  if (l > 0) {
    list += "<ul>";
    for (i = 0; i < l; i++) {
      list += this.countries[i]; // toString implicitly called
    }
    list += "</ul>";
  }
  list += "</li>";
  return list;
}

function Country(name) {
  this.name = name;
  this.cities = [];
}
Country.prototype.addCity = function(city) {
  if (!(city instanceof City)) throw new Error("Not a city");
  this.cities.push(city);
}
Country.prototype.toString = function() {
  var list = "<li>" + this.name,
    l = this.cities.length,
    i;
  if (l > 0) {
    list += "<ul>";
    for (i = 0; i < l; i++) {
      list += this.cities[i]; // toString implicitly called
    }
    list += "</ul>";
  }
  list += "</li>";
  return list;
}

function City(name) {
  this.name = name;
}
City.prototype.toString = function() {
  return "<li>" + this.name + "</li>";
}

// ------------------ END CLASS DEFINITIONS ---------------------

var world = new World(),
  africa = new Continent('Africa'),
  niger = new Country('Niger'),
  abuya = new City('Abuya');

world.addContinent(africa);
africa.addCountry(niger);
niger.addCity(abuya);

document.body.innerHTML = world;

Great answer, except I would probably rename toString to toHtml

Hacketo · Accepted Answer · 2015-01-20 17:45:02Z

This is not possible, if triArray[0] is a string it can't be an array of strings.

You should go for a structure like this :

{
     continents : [

         {
             name:"Africa",
             countries : [
                 {
                     name : "Niger",
                     cities : [
                         "Abuya" , "", ...
                     ]
                 },
                 ...
             ]
         },
         ...
     ]
 }

And you could access it like this :

var continents = data["continents"];

for (var i =0,len = continents.length; i<len;i++){
    var continentData = continents[i];

    var continentName = continentData["name"];

    var listCountries = continentData["countries"];
    for (var y =0,leny = listCountries.length; y<leny;y++){
        var countryData = listCountries[y];

        var countryName = countryData["name"];

        // List of cities
        var cities = countryData["cities"];

    }

}

Edit: added for informations, this is possible but imply some javascript knowledges and its string representation would be different than a simple array:

 
var world = [];
world.name = "world";

world.push([])

world[0].name = "Africa";
world[0].push([]);


world[0][0].name = "Niger";
world[0][0].push("Abuya");

document.write(world[0].name);
document.write(world[0][0].name);
document.write(world[0][0][0]);

Collectives™ on Stack Overflow

Tridimensional array solution javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related