从多维数组jquery获取值

Question

我正在制作谷歌地图多标记地图，并在标记点击，我想获取自定义弹出窗口中的信息，关于位置，我有变量的问题，我把我的位置信息。我想从数组中获取一个位置信息，将其附加到我的弹出窗口。我搜索了很多帖子，但没有找到解决方案

这是我的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>