javascript - 三维数组解决方案javascript

Question

我正在从数据库中读取信息，我想要以下结构:大陆->国家/地区->城市。我通过 PHP 获取数据。我想将这些数据存储在三维 javascript 数组中(或者至少这是我从昨天开始尝试做的事情)。

我不知道以下是否可行:

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

这个想法是通过 PHP 创建这些数组并使用数据来填充它们。

我“需要”(我想，我不是专家)一个三维模型，然后使用 for 循环查看哪个城市属于哪个国家以及该国家位于哪里。

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

不知道你是否得到我想要的，先谢谢了。

Answer 1

考虑一种更加面向对象的方法 - 这应该很容易，因为大陆/国家/城市都是事物。

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
}

您可以以类似的方式构建函数 Country 和 函数 City。

现在已经完成了，并且您已经构建了结构，您可以输出它。也许是这样的:

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

为Country和City添加类似的功能。

现在您可以输出大陆，例如在 someULelement.innerHTML 中，它将根据需要呈现。

您可能希望有一个function World来充当整体容器。

面向对象的代码可以使此类任务更容易直观地理解。

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