How to output objects javascript

Question

 var markers = [
        {
          coords:{lat:  14.5858544, lng: 120.9763816},
        }
      ];

Hi everyone, how do I output the lat and lng? I can't seem to access them. I have tried

document.getElementById("demo").innerHTML = markers[0].coords

document.getElementById("demo").innerHTML =  markers['coords'][0]['lat'];

but it doesn't work

object directly can't be displayed ,you can display value of member of object using 'object.member_name' — Jatin Parmar, Mar 09 '18 at 15:16

score 2 · Answer 1 · answered Mar 09 '18 at 15:14

2

markers[0].coords.lat

or

markers[0]['coords']['lat']

Full documentation about this subject: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

answered Mar 09 '18 at 15:14

Lee Kowalkowski

11,591
3
40
46

score 1 · Answer 2 · answered Mar 09 '18 at 15:15

The way you access different types is wrong. Try this:

var markers = [
  {
    coords: {
      lat:  14.5858544,
      lng: 120.9763816
    },
  }
];

// To get lat
console.log(markers[0].coords.lat) // 14.5858544
// To get lng
console.log(markers[0].coords.lat) // 120.9763816

score 1 · Answer 3 · answered Mar 09 '18 at 15:16

 var markers = [
        {
          coords:{lat:  14.5858544, lng: 120.9763816},
        }
      ];
      
function a(){
document.getElementById("demo_lat").innerHTML = markers[0].coords.lat;
document.getElementById("demo_lng").innerHTML = markers[0].coords.lng;
}

<p id="demo_lat"></p>
<p id="demo_lng"></p>
<button onclick="a()">Show</button>

score 1 · Answer 4 · answered Mar 09 '18 at 15:25

For your HTML

 var markers = [{
     coords: {
         lat: 14.5858544,
         lng: 120.9763816
     },
 }];

You can do either:

document.getElementById("lat").innerHTML = markers[0].coords.lat;
document.getElementById("lng").innerHTML = markers[0].coords.lng;

or

document.getElementById("lat").innerHTML = markers[0]['coords']['lat'];
document.getElementById("lng").innerHTML = markers[0]['coords']['lng'];

To print them on console

 console.log(markers[0].coords.lat)
 console.log(markers[0].coords.lng)

score 0 · Answer 5 · answered Mar 09 '18 at 15:14

0

You can get the lat and lng like this:

var markers = [
        {
          coords:{lat:  14.5858544, lng: 120.9763816},
        }
      ];
      console.log( markers[0].coords.lat)
       console.log( markers[0].coords.lng)

answered Mar 09 '18 at 15:14

Scath

3,777
10
29
40

score 0 · Answer 6 · answered Mar 09 '18 at 15:17

0

var markers = [
    {
        coords: {lat:  14.5858544, lng: 120.9763816},
    }
];

document.getElementById(`demo`).innerHTML = `lat: ${markers[0].coords.lat}<br>lng: ${markers[0].coords.lng}`;

<div id="demo"></div>

answered Mar 09 '18 at 15:17

rafaelgomesxyz

1,405
8
14

score 0 · Answer 7 · answered Mar 09 '18 at 15:21

0

  const getKeyOfObject = (key) => markers.map(item => 
  item.coords[key]).join('')

  getKeyOfObject('lat') // 14.5858544

answered Mar 09 '18 at 15:21

oldmayn

161
2
3
14

score 0 · Answer 8 · answered Mar 09 '18 at 15:22

The first approach only prints the Object coords instead of lat and lng.
The second approach is trying to access an attribute called coords which doesn't exist.

With that scenario, you can use Destructuring Assignment:

This snippet loops over the possible markers

var markers = [{
  coords: {
    lat: 14.5858544,
    lng: 120.9763816
  },
}];

markers.forEach(function(marker) {
  var { lat, lng } = marker.coords; //Destructuring Assignment.
  console.log(lat, '-', lng);
});

How to output objects javascript

8 Answers8