For Loop To Get One Variable From Each Nested Array

Question

I am trying to go through some Json and just get the "city_name" value from each nested array and print it in a list. QUESTION: How do you loop over an array and just get the first element from each array?

"state": [
 {
 "city_name": "Denver",
 "timezone": "MST",
 },
 {
 "city_name": "Austin",
 "timezone": "CST",
 }
{
 "city_name": "Atlanta",
 "timezone": "EST",
 }
 ],

Javascript that I tried:

fetch(‘URL’).then(function(response) { 
 return response.json();
 }).then(function(data) {
 console.log(data);
 for (x in data.state) {
 document.getElementById("cities").innerHTML += data.state.city_name + "<br>";
 } 
 });

Response: undefined undefined undefined

Is this the correct way to get the value inside the array? Why does it say undefined? *this is just sample data to help explain my problem

• str: stackoverflow.com/questions/500504/…
• Pavlo: const cityList = data.State.map(element => element.city_name);
• Derek 朕會功夫: Because you don't have a property named "state". It's "State" and it's an array so you should use for ... of instead of for ... in.
• glaemart: Pavlo: I tried the const cityList = data.State.map(element => element.city_name); But this just repeated Denver 3 times. I placed it inside the For Loop and outside.
• glaemart: Derek: The capital State was a typo in my sample, I've corrected it. I tried changing it to For "of" but that still resulted in "undefined"

Answer 1

fetch(‘URL’).then(function(response) { 
 return response.json();
}).then(function(data) {
 let cities = data.state.map(e => e.city_name);
 document.getElementById("cities").innerHTML += cities.join('<br/>');
});

This should work assuming data is an object containing a property state