javascript 変数の情報が消える?

Question

全体像

Rails5.2とgoogle map APIを使った地図表示アプリです。

情報の流れとしては、
①gonというgemを使って、Railsのコントローラーからjavascriptに情報を渡す
②javascriptでgoogle map APIを使って住所から緯度経度を取得
③住所と緯度経度を含んだデータをRailsコントローラーに渡す
という流れです。

google map APIのジオコーダーを使って、住所から緯度経度を取得しているところまではうまくいっています。

問題はそのデータをrailsコントローラーに渡す時に緯度経度の情報が消えてしまっているところです。
（ajaxで情報の受け渡し自体はできているので、javascriptの中で変数を受け渡ししている時に情報が消えてしまっているかと考えています）

検証内容

consoleで一つずつ情報を取り出してみました。

1    console.log(places)
2    console.log(places[0])
3    console.log(places[0].latlng)

1. console.log(places)

6行目：latlngプロパティは存在しています。

(3) [{…}, {…}, {…}]
0:
address: "大阪府大阪市北区天神橋１丁目１２−１９"
created_at: "2020-05-28T12:08:37.612Z"
id: 1
latlng: {lat: 34.6945953, lng: 135.5116653}
name: "トキオナ"
object: {eleven: 11, two: 22}
updated_at: "2020-05-30T13:34:38.525Z"
__proto__: Object
1: {id: 2, name: "らーめん楓人", address: "大阪府大阪市北区南森町１丁目２−２", latlng: {…}, created_at: "2020-05-28T12:09:54.159Z", …}
2: {id: 3, name: "&ISLAND", address: "２丁目-１-２３ 北浜 中央区 大阪市 大阪府", latlng: {…}, created_at: "2020-05-28T12:15:14.545Z", …}
length: 3
__proto__: Array(0)
```

2. console.log(places[0])
1行目：latlngプロパティはnullになっていると思いきや、
展開するとlatlngはlatとlngが表示されます

{id: 1, name: "トキオナ", address: "大阪府大阪市北区天神橋１丁目１２−１９", latlng: null, created_at: "2020-05-28T12:08:37.612Z", …}
//以下展開した時の情報
address: "大阪府大阪市北区天神橋１丁目１２−１９"
created_at: "2020-05-28T12:08:37.612Z"
id: 1
latlng:
lat: 34.6945953
lng: 135.5116653
proto: Object
name: "トキオナ"
object: {eleven: 11, two: 22}
updated_at: "2020-05-30T13:34:38.525Z"
proto: Object

3.console.log(places[0].latlng)

nullとしか返されません

null

この状態なので、placesをrailsコントローラーに渡した時、latlngの情報は空っぽの状態です。

$.ajax({
  url: "/maps/setLatlng",
  type: "POST",
  data: { content: places },
  datatype: "html",
  success: function (data) {
    console.log("成功")
  },
  error: function (data) {
    console.log("失敗")
  }
});

※受け渡しは成功するものの、latlngの情報は空の状態

{"content"=>{"0"=>{"id"=>"1", "name"=>"トキオナ", "address"=>"大阪府大阪市北区天神橋１丁目１２−１９", "latlng"=>"", "created_at"=>"2020-05-28T12:08:37.612Z", "updated_at"=>"2020-05-30T13:34:38.525Z"},

どこにトラブルが潜んでいるかや、検証方法教えていただけますでしょうか。

よろしくお願いします。

Answer 1

非同期通信のため、上から順々に実行されていないことが原因でした。
（検証の仕方はサークルの人に教えてもらいました）

javascriptの中にdebuggerを仕込んで、プログラムの実行順や変数の中身を一つずつ確認しました。

考えていた流れになっていなかったので、promiseを使って処理順を整理しました。