¿Cómo crear dos cuadros de selección a partir del objeto dado? Necesito crear dos cuadros de opciones de selección con el menú desplegable País y la Selección desplegable de Estado.
const optionsList = ko.observableArray ([ { 'AD':{'name':'Andora'}, 'AE':{'name':"United Arab Emirates"}, 'AG':{'name':"Antigua & Barbuda"}, 'ES':{'name':"Spain", 'regions':{ "22": { "code": "A Coruсa", "name": "A Coruña" }, "23": { "code": "Alava", "name": "Alava" }, "24": { "code": "Albacete", "name": "Albacete" } "25": { "code": "Zaragoza", "name": "Zaragoza" } }}, 'AT':{'name':"Austria", 'regions':{ "95": { "code": "WI", "name": "Wien" }, "96": { "code": "NO", "name": "Niederösterreich" } }}, 'AU':{'name':"Australia", 'regions':{ "569": { "code": "ACT", "name": "Australian Capital Territory" }, "570": { "code": "NSW", "name": "New South Wales" }, "571": { "code": "VIC", "name": "Victoria" }, "572": { "code": "QLD", "name": "Queensland" } }} } ])Quiero crear dos menús desplegables usando knockout JS.
No estoy seguro de cómo crear dos cuadros de selección en knockout usando el objeto anterior.
Gracias por cualquier información útil.
Puede definir regions calculadas que miren un país seleccionado y solo devuelvan sus regiones:
const regions = ko.pureComputed( () => selectedCountry()?.regions ?? [] // can be null -^ ^^- if a country has no regions, // return an empty list );Los datos que publicaste usan objetos donde esperaría matrices, por lo que es ligeramente diferente. Aquí hay un ejemplo ejecutable:
const countries = Object.values(getData()); const selectedCountry = ko.observable(null); const regions = ko.pureComputed( () => Object.values( selectedCountry()?.regions ?? {} ) ); const selectedRegion = ko.observable(null); ko.applyBindings({ countries, selectedCountry, regions, selectedRegion }); function getData() { return { 'AD': { 'name': 'Andora' }, 'AE': { 'name': "United Arab Emirates" }, 'AG': { 'name': "Antigua & Barbuda" }, 'ES': { 'name': "Spain", 'regions': { "22": { "code": "A Coruсa", "name": "A Coruña" }, "23": { "code": "Alava", "name": "Alava" }, "24": { "code": "Albacete", "name": "Albacete" }, "25": { "code": "Zaragoza", "name": "Zaragoza" } } }, 'AT': { 'name': "Austria", 'regions': { "95": { "code": "WI", "name": "Wien" }, "96": { "code": "NO", "name": "Niederösterreich" } } }, 'AU': { 'name': "Australia", 'regions': { "569": { "code": "ACT", "name": "Australian Capital Territory" }, "570": { "code": "NSW", "name": "New South Wales" }, "571": { "code": "VIC", "name": "Victoria" }, "572": { "code": "QLD", "name": "Queensland" } } } } }; <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select data-bind=" options: countries, value: selectedCountry, optionsText: 'name' "></select> <select data-bind=" options: regions, value: selectedRegion, optionsText: 'name', visible: regions().length "></select> <pre data-bind="text: JSON.stringify({ country: selectedCountry(), region: selectedRegion() }, null, 2)"></pre>