Get key/value pair from Firebase response nested JSON object

Question

I am getting the following response from a GET API call to Firebase database. It is a nested JSON objects.

I want to get all the values for key name from each nested object into an array using JavaScript

GET REST API Response:

{
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": “description text”,
    "imgURLs": [ "Https:url1”,  "https:url2”, "https:url3” ],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url”
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
     "description": “description text”,
    "imgURLs": [ "Https:url1”,  "https:url2”, "https:url3” ],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url”
  }
}

Answer 1

Here I use for in to loop each object in your JSON then push the name into the result array.

const data = {
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": "description text",
    "imgURLs": ["Https:url1", "https: url2", "https:url3"],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url"
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": "description text",
    "imgURLs": ["Https:url1", "https: url2", "https:url3"],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url"
  }
}

let result = []
for (let i in data) {
  result.push(data[i].name)
}
console.log(result)

Answer 2

It can be done using:

1. Using Array.reduce to accumulate the name values into a single array.

2. Using Object.keys and Array.map to iterate through the keys and map it to the name array.

3. Using Object.values and Array.map

4. Using Array.from and utilizing the second mapping function parameter to map individual objects to an array of names.

const obj = {"barID1":{"address":"4 East Terrace, Sydney NSW 2000","appStoreURL":"http://itunes.apple.com/app/idXXXXXXXXX","description":"description text","imgURLs":["Https:url1","https:url2","https:url3"],"lat":-34.810585,"lon":138.616739,"name":"Africola","phone":"(08) 8223 3885","status":"active","venueImgURL":"https:url"},"barID2":{"address":"138/140 Gouger St, Sydney NSW 2000","appStoreURL":"http://itunes.apple.com/app/idXXXXXXXXX","description":"description text","imgURLs":["Https:url1","https:url2","https:url3"],"lat":-34.848082,"lon":138.599813,"name":"Disco Mexico Taqueria","phone":"0416 855 108","status":"active","venueImgURL":"https:url"}};

//using Object.values & reduce
let name = Object.values(obj).reduce((acc, ele) =>{
 return acc.concat(ele.name)
}, []);
console.log(name);

//using Object.keys & map 
name = Object.keys(obj).map((ele) => obj[ele]['name']);
console.log(name);

//using Object.values & map
name = Object.values(obj).map((ele) => ele.name);
console.log(name);

//using Array.from
name = Array.from(Object.values(obj), ele => ele.name);
console.log(name);

Answer 3

You could extract the values of the input object via Object.values() and then map() the name from each object value as shown below to achieve this:

const data = {
    barID1: {
    address: "4 East Terrace, Sydney NSW 2000",
    appStoreURL: "http://itunes.apple.com/app/idXXXXXXXXX",
    description: "description text",
    imgURLs: [ "Https:url1",  "https:url2", "https:url3" ],
    lat: -34.810585,
    lon: 138.616739,
    name: "Africola",
    phone: "(08) 8223 3885",
    status: "active",
    venueImgURL: "https:url"
  },
    barID2: {
    address: "138/140 Gouger St, Sydney NSW 2000",
    appStoreURL: "http://itunes.apple.com/app/idXXXXXXXXX",
    description: "description text",
    imgURLs: [ "Https:url1",  "https:url2", "https:url3" ],
    lat: -34.848082,
    lon: 138.599813,
    name: "Disco Mexico Taqueria",
    phone: "0416 855 108",
    status: "active",
    venueImgURL: "https:url"
  }
}

console.log( Object.values(data).map(object => object.name) )