Question

我正在尝试使用JavaScript实现依赖下拉列表。我有三个下拉列表国家，州和城市，下拉列表的数据可以从下面的JSON数据访问，我想以这样的方式存储数据：所有国家都应该存储在国家/地区阵列中，基于国家/地区，状态应存储在状态数组中并基于状态，城市应存储在城市数组中。我尝试过使用for循环，但我只能访问最里面的键值对，即city。

var country=     {
        "Countries": [{
            "Country": "Country1",
            "states": [{
                "state": "state1",
                "city": ["city1", "city2"]
            }, {
                "state": "state2",
                "city": ["city1", "city2"]
            }]
        }, {
            "Country": "Country2",
            "states": [{
                "state": "state3",
                "city": ["city1", "city2"]
            }, {
                "state": "state4",
                "city": ["city1", "city2"]
            }]
        }]
    }

Answer 1

<强>解决方案

我尝试使用类似索引的方法来解决问题。从给定的对象我创建了3个数组（国家，州和城市），我在那里存储名称以及对其他数组的引用。这样：

国家/地区数组

{
  country_id: index of country,
  country: name of country
}

状态数组

{
  state_id: index of state,
  state: name of state,
  country_id: reference to country array
}

城市数组

{
  city_id: index of city,
  city: name of city,
  state_id: reference to state array
}

使用Array.prototype.filter功能我正在检索状态（基于国家ID）和城市（基于州ID）。见下文：

示例代码

/**
 * Example
 * @type {Object}
 */
var country = {
    "Countries": [{
        "Country": "Country1",
        "states": [{
            "state": "state11",
            "city": ["city111", "city112"]
        }, {
            "state": "state12",
            "city": ["city121", "city122"]
        }]
    }, {
        "Country": "Country2",
        "states": [{
            "state": "state23",
            "city": ["city231", "city232"]
        }, {
            "state": "state24",
            "city": ["city241", "city242"]
        }]
    }]
};

/**
 * Default starting ID for state list
 * @type {Number}
 */
var state_id = 0;

/**
 * Default starting ID for city list
 * @type {Number}
 */
var city_id = 0;

/**
 * Array of country names
 * @type {Array}
 */
var country_array = [];

/**
 * Array of states (along with ID of country they belong to)
 * @type {Array}
 */
var state_array = [];

/**
 * Array of cities (along with ID of state they belong to)
 * @type {Array}
 */
var city_array = [];

/////////////////
// THE PROCESS //
/////////////////
country.Countries
    .forEach(function(each_country, country_index) {

        country_array
            .push({
                country_id: country_index,
                country: each_country.Country
            });

        each_country.states
            .forEach(function(each_state) {

                state_array
                    .push({
                        state_id: state_id,
                        state: each_state.state,
                        country_id: country_index
                    });

                each_state.city
                    .forEach(function(each_city) {

                        city_array
                            .push({
                                city_id: city_id,
                                city: each_city,
                                state_id: state_id
                            });

                        city_id = city_array.length; // Calculating the next city_id
                    });

                state_id = state_array.length; // Calculating the next state_id
            });
    });

/**
 * Returns array of countries
 * @return {[Object]} Array of countries
 */
var getCountryList = function() {
    return country_array;
};

/**
 * Returns array of states belonging to a country
 * @param  {Number}   country_id The index of the country in the country array
 * @return {[Object]}            Array of states
 */
var getStateList = function(country_id) {
    return state_array
        .filter(function(each) {
            return each.country_id === country_id;
        });
};

/**
 * Returns array of cities belonging to a state
 * @param  {Number}   state_id The index of the state in the state array
 * @return {[Object]}          Array of cities
 */
var getCityList = function(state_id) {
    return city_array
        .filter(function(each) {
            return each.state_id === state_id;
        });
};

// Retrieve the country list
getCountryList();

// Retrieve the state list of country with ID 0
getStateList(0);

// Retrieve the state list of country with ID 1
getStateList(1);

// Retrieve the city list of state with ID 0
getCityList(0);

// Retrieve the city list of state with ID 1
getCityList(1);

Answer 2

您可以使用reduce()返回一个具有键/值对的对象，例如key是city或state，value是所有城市的数组。

＆＃13;

var country = {
  "Countries": [{
    "Country": "Country1",
    "states": [{
      "state": "state1",
      "city": ["city1", "city2"]
    }, {
      "state": "state2",
      "city": ["city1", "city2"]
    }]
  }, {
    "Country": "Country2",
    "states": [{
      "state": "state3",
      "city": ["city1", "city2"]
    }, {
      "state": "state4",
      "city": ["city1", "city2"]
    }]
  }]
}

var result = country.Countries.reduce(function(r, e) {
  r.country = (r.country || []).concat(e.Country);
  e.states.forEach(function(a) {
    r.state = (r.state || []).concat(a.state);
    r.city = (r.city || []).concat(a.city);
  })
  return r;
}, {})


console.log(result)

＆＃13;

如何在数组中存储JSON数据

2 个答案: