Reading length of on of the object in a Multiple objects Json Array using Javascript

Question

All I need is to select a region from the first drop down then it will fill the second dropdown with the data from the Json array accordingly.

I facing an issue with reading the length of the selected region array after selecting the region from the drop-down. I get undefined due to the length, but when I remove the .length property, I get the array correctly.

 const myJSON = '[' + '{"المنطقة الشرقية":[' + '{ "cityName":"الدمام","deliveryTime":"1" },' + '{ "cityName":"الخبر","deliveryTime":"1" },' + '{ "cityName":"القطيف","deliveryTime":"1" },' + '{ "cityName":"صفوى","deliveryTime":"1" },' + '{ "cityName":"سيهات","deliveryTime":"1" },' + '{ "cityName":"عنك","deliveryTime":"1" },' + '{ "cityName":"الظهران","deliveryTime":"1" },' + '{ "cityName":"الجبيل","deliveryTime":"1" },' + '{ "cityName":"الهفوف","deliveryTime":"1" },' + '{ "cityName":"رأس تنورة","deliveryTime":"1" },' + '{ "cityName":"بقيق","deliveryTime":"1" },' + '{ "cityName":"المبرز","deliveryTime":"1" },' + '{ "cityName":"رحيمة","deliveryTime":"1" },' + '{ "cityName":"الأحساء","deliveryTime":"1" },' + '{ "cityName":"الخفجي","deliveryTime":"1" },' + '{ "cityName":"النعيرية","deliveryTime":"1" },' + '{ "cityName":"تاروت","deliveryTime":"1" }' + ']},' + '{"المنطقة الوسطى":[' + '{ "cityName":"الرياض","deliveryTime":"" },' + '{ "cityName":"الخرج","deliveryTime":"" },' + '{ "cityName":"بريدة","deliveryTime":"" },' + '{ "cityName":"عنيزة","deliveryTime":"" },' + '{ "cityName":"الرس","deliveryTime":"" },' + '{ "cityName":"المجمعة","deliveryTime":"" }' + ']}' + ']'; const myObj = JSON.parse(myJSON); var regions = document.getElementById("m_continent"); // Optional: Clear all existing options first: regions.innerHTML = " <option value='-1'>اختر منطقة التوصيل</option>"; // Populate list with options: var j = 0; var allCities; Object.keys(myObj).forEach(function(key) { var value = Object.getOwnPropertyNames(myObj[key]); regions.innerHTML += "<option value=\"" + j++ + "\">" + value + "</option>"; }); function fillCities(val) { var cities = document.getElementById("m_cities"); var region = regions.value; cities.innerHTML = " <option value='0'>اختر مدينة التوصيل</option>"; var allCities = myObj[region]; console.log(allCities.length); for (var i = 0; i < allCities.length; i++) { var city = allCities[i]; console.log(city); cities.innerHTML += "<option value=\"" + city + "\">" + city + "</option>"; } }

 <!DOCTYPE html> <html> <body style="direction:rtl"> <h2>مدن وأوقات التوصيل</h2> <p>يمكنك تقدير وقت وصول طلبك لمدينتك</p> <label for="m_continent">اختر منطقتك</label> <select id="m_continent" onchange="fillCities(this.value)"> </select> <br> <label for="m_cities">اختر مدينتك</label> <select id="m_cities"> <option value="0">اختر المنطقة أولا</option> </select> </div> <p id="delivery-time"></p> </body> </html>

All I want is to find the length of the selected array.

Answer 1

Because myObj[region] will not output the cities but the region itself, you need to get the cities inside, I work around it by Object.values(myObj[region]).flat() to get the cites.

 const myJSON = '[' + '{"المنطقة الشرقية":[' + '{ "cityName":"الدمام","deliveryTime":"1" },' + '{ "cityName":"الخبر","deliveryTime":"1" },' + '{ "cityName":"القطيف","deliveryTime":"1" },' + '{ "cityName":"صفوى","deliveryTime":"1" },' + '{ "cityName":"سيهات","deliveryTime":"1" },' + '{ "cityName":"عنك","deliveryTime":"1" },' + '{ "cityName":"الظهران","deliveryTime":"1" },' + '{ "cityName":"الجبيل","deliveryTime":"1" },' + '{ "cityName":"الهفوف","deliveryTime":"1" },' + '{ "cityName":"رأس تنورة","deliveryTime":"1" },' + '{ "cityName":"بقيق","deliveryTime":"1" },' + '{ "cityName":"المبرز","deliveryTime":"1" },' + '{ "cityName":"رحيمة","deliveryTime":"1" },' + '{ "cityName":"الأحساء","deliveryTime":"1" },' + '{ "cityName":"الخفجي","deliveryTime":"1" },' + '{ "cityName":"النعيرية","deliveryTime":"1" },' + '{ "cityName":"تاروت","deliveryTime":"1" }' + ']},' + '{"المنطقة الوسطى":[' + '{ "cityName":"الرياض","deliveryTime":"" },' + '{ "cityName":"الخرج","deliveryTime":"" },' + '{ "cityName":"بريدة","deliveryTime":"" },' + '{ "cityName":"عنيزة","deliveryTime":"" },' + '{ "cityName":"الرس","deliveryTime":"" },' + '{ "cityName":"المجمعة","deliveryTime":"" }' + ']}' + ']'; const myObj = JSON.parse(myJSON); var regions = document.getElementById("m_continent"); // Optional: Clear all existing options first: regions.innerHTML = " <option value='-1'>اختر منطقة التوصيل</option>"; // Populate list with options: var j = 0; var allCities; Object.keys(myObj).forEach(function(key) { var value = Object.getOwnPropertyNames(myObj[key]); regions.innerHTML += "<option value=\"" + j++ + "\">" + value + "</option>"; }); function fillCities(val) { var cities = document.getElementById("m_cities"); var region = regions.value; cities.innerHTML = " <option value='0'>اختر مدينة التوصيل</option>"; var allCities = Object.values(myObj[region]).flat(); for (var i = 0; i < allCities.length; i++) { var city = allCities[i]; console.log(city); cities.innerHTML += "<option value=\"" + city.cityName + "\">" + city.cityName + "</option>"; } }

 <!DOCTYPE html> <html> <body style="direction:rtl"> <h2>مدن وأوقات التوصيل</h2> <p>يمكنك تقدير وقت وصول طلبك لمدينتك</p> <label for="m_continent">اختر منطقتك</label> <select id="m_continent" onchange="fillCities(this.value)"> </select> <br> <label for="m_cities">اختر مدينتك</label> <select id="m_cities"> <option value="0">اختر المنطقة أولا</option> </select> </div> <p id="delivery-time"></p> </body> </html>

Reading length of on of the object in a Multiple objects Json Array using Javascript

Question

1 answers

solution1
0 ACCPTED 2022-07-17 14:08:41

Reading length of on of the object in a Multiple objects Json Array using Javascript

Question

1 answers

solution1 0 ACCPTED 2022-07-17 14:08:41

solution1
0 ACCPTED 2022-07-17 14:08:41