2016-09-07 48 views
0

我正在嘗試使用JavaScript實現依賴下拉列表。我有三個下拉菜單的國家,州和城市,下拉菜單的數據可以從下面的JSON數據中獲得,我想以這樣一種方式存儲數據,即所有的國家都應該根據國家,州應該存儲在狀態數組中並且基於狀態,城市應該存儲在城市數組中。我曾嘗試使用for循環,但我只能訪問最內層的鍵值對,即城市。如何在數組中存儲JSON數據

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"] 
      }] 
     }] 
    } 
+0

[轉換JSON數據數組(http://stackoverflow.com/questions/23409909/convert-json-data-to-array) – Abhijeet

+0

請出示什麼樣的代碼可能的複製你試過了,輸出是什麼意外。目前還不清楚你展示的代碼是輸入還是期望的輸出。你也應該注意到你的問題中沒有JSON,因爲JSON指的是字符串。這些是物體。 – 4castle

回答

0

解決方案

我已經嘗試使用索引式的方法來解決這個問題。從給定的對象我創建了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); 
0

您可以使用reduce()返回與鍵/值對一個對象,其中例如關鍵是城市或州和值是所有城市的陣列。

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)