получить значение из многомерного массива jquery

Question

Я делаю мультимаркерную карту Google Maps, и по щелчку маркера я хотел получить информацию в пользовательском всплывающем окне, о местоположении, у меня проблема с переменной, куда я помещаю информацию о моем местоположении.Я хотел получить информацию о местоположении из массива, чтобы добавить его в мое всплывающее окно.Я просмотрел много постов, но не нашел решения

Это мой JS для этого.

var events = [
  [
      56.92436,
      24.11869,
      '1234',
      'Location 1'
  ],
  [
      58.780083,
      24.256746,
      '5678',
      'Location 2'
  ],
  [
      56.95042,
      24.10352,
      '9012',
      'Location 3'
  ]
]

$('button').click(getInfo);

function getInfo(id){
    id = "5678";


  $("#info").html('');
  $("#info").append(events);
}

Есть JSFiddle

Answer 1

Вы можете использовать функцию find и проверить третье значение индекса.

Этот подход разрушает каждый массив, получая третье значение индекса ([_, __, eventId]).

let events = [  [    56.92436,    24.11869,    '1234',    'Location 1'  ],  [    58.780083,    24.256746,    '5678',    'Location 2'  ],  [    56.95042,    24.10352,    '9012',    'Location 3'  ]];

$('button').click(getInfo);

function getInfo() {
  let id = "5678";
  let event = events.find(([_, __, eventId]) => eventId === id);

  $("#info").html('');
  $("#info").append(event);
}

body {  padding: 20px;  font-family: Helvetica;}#banner-message {  background: #fff;  border-radius: 4px;  padding: 20px;  font-size: 25px;  text-align: center;  transition: all 0.2s;  margin: 0 auto;  width: 300px;}button {  background: #0084ff;  border: none;  border-radius: 5px;  padding: 8px 14px;  font-size: 15px;  color: #fff;}#banner-message.alt button {  background: #fff;  color: #000;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="info">Info about location</div><button>Get info about Location 2</button>

Без логики деструктуры

let events = [  [    56.92436,    24.11869,    '1234',    'Location 1'  ],  [    58.780083,    24.256746,    '5678',    'Location 2'  ],  [    56.95042,    24.10352,    '9012',    'Location 3'  ]];

$('button').click(getInfo);

function getInfo() {
  let id = "5678";
  let event = events.find(arr => {
    let eventId = arr[2];
    return eventId === id;
  });

  $("#info").html('');
  $("#info").append(event);
}

body {  padding: 20px;  font-family: Helvetica;}#banner-message {  background: #fff;  border-radius: 4px;  padding: 20px;  font-size: 25px;  text-align: center;  transition: all 0.2s;  margin: 0 auto;  width: 300px;}button {  background: #0084ff;  border: none;  border-radius: 5px;  padding: 8px 14px;  font-size: 15px;  color: #fff;}#banner-message.alt button {  background: #fff;  color: #000;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="info">Info about location</div><button>Get info about Location 2</button>