Отсутствует] после списка элементов - Javascript метод добавления

Question

Я пытаюсь создать динамическое c раскрывающееся меню, связанное с моим проектом, благодаря этой строке javascript:

$("#navbar-item-1").append(`<a class="dropdown-item" type="button" onclick="changeMyCurrentMap('${tabName[j]}','${tabLat[j]}','${tabLon[j]}', ${tabMarkerList[j]})">${tabName[j]}</a>`);

Когда мы нажимаем на одну из кнопок, содержащихся в на панели навигации (Bootstrap3) мы активируем функцию changeMyCurrentMap, которая представлена ​​этим прототипом:

function changeMyCurrentMap(name, lat, lon, markerList);

name , lat и lon соответственно строка и 2 двойные. markerList - список объектов.

Когда я вызываю changeMyCurrentMap с помощью onclick, все параметры передаются правильно, кроме массива (поэтому markerList), который возвращает эту ошибку:

Синтаксическая ошибка: отсутствует] после списка элементов.

Я уже прочитал много сообщений об этом типе ошибки, но все еще не могу найти, где может быть моя проблема. У кого-нибудь есть идеи?

Answer 1

Вместо добавления всего значения в HTML вы можете просто написать индекс и использовать тот же индекс в функции обратного вызова. Проверьте два примера, делая то же самое. Один без, а другой с помощью индекса.

$(function () {
  const tabName = ["tab1", "tab2", "tab3"];
  const tabLat = ["tabLat1", "tabLat2", "tabLat3"];
  const tabMarkerList = ["tabMarkerList1", "tabMarkerList2", "tabMarkerList3"];
  const tabLon = ["tablon1", "tablon2", "tablon3"];
  window.changeMyCurrentMap = (name, lat, lon, mark) => {
    console.log(name, lat, lon, mark);
  };
  for (let j = 0; j < 3; j++) {
    $("#navbar-item-1").append(
      `<li><a class="dropdown-item" type="button" onclick="changeMyCurrentMap('${tabName[j]}','${tabLat[j]}','${tabLon[j]}', '${tabMarkerList[j]}')">${tabName[j]}</a></li>`
    );
  }
  window.changeMyCurrentMapIndex = (index) => {
    console.log(
      tabName[index],
      tabLat[index],
      tabLon[index],
      tabMarkerList[index]
    );
  };
  for (let j = 0; j < 3; j++) {
    $("#navbar-item-2").append(
      `<li><a class="dropdown-item" type="button" onclick="changeMyCurrentMapIndex(${j})">${tabName[j]}</a></li>`
    );
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p>Without index</p>
    <ul id="navbar-item-1"></ul>
    <p>With index</p>
    <ul id="navbar-item-2"></ul>

Answer 2

хорошо, так что самое простое решение - это упорядочить массив и затем проанализировать его.

примерно так:

$("#navbar-item-1").append(`<a class="dropdown-item" type="button" onclick="changeMyCurrentMap_('${tabName[j]}','${tabLat[j]}','${tabLon[j]}', '${JSON.stringify(tabMarkerList[j])}')">${tabName[j]}</a>`);

// note this is not the changeMyCurrentMap function but is another middleware function to pass correct data to changeMyCurrentMap
function changeMyCurrentMap_(a, b, c){
    changeMyCurrentMap(a, b, JSON.parse(c))
}