So speichern Sie JSON-Daten im Array

Question

Ich versuche, abhängige Dropdown-Menüs mit JavaScript zu implementieren. Ich habe drei Dropdowns Land, Bundesland und Stadt und die Daten für die Dropdowns sind aus den folgenden JSON-Daten zu erreichen. Ich möchte die Daten so speichern, dass alle Länder in Ländergruppen gespeichert werden, basierend auf dem Land. states sollten in state array gespeichert werden und basierend auf states sollte city in city array gespeichert werden. Ich habe versucht, for-Schleife zu verwenden, aber ich kann nur auf das innerste Schlüsselwertpaar zugreifen, d. H. Stadt.

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

Lösung

Ich habe versucht, eine Indizierung artige Ansatz zu verwenden, um das Problem zu lösen. Von dem gegebenen Objekt habe ich 3 Arrays erstellt (für Land, Zustand & Stadt), wo ich die Namen sowie den Verweis auf andere Arrays ablege. So dass:

Land Array

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

Staat Array

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

Stadt Array

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

U Singen Sie die Array.prototype.filter Funktion Ich erhalte die Zustände (basiert auf Land Identifikation) und Städte (basiert auf Zustand Identifikation). Siehe unten:

Beispielcode

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

Sie reduce() ein Objekt mit Schlüssel/Wert-Paare zurückkehren können, wo zum Beispiel Schlüssel ist, Stadt oder Staat und Wert Array aller Städte.

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)