Импорт файла json внутри функции jquery без кавычек

Question

Это мой файл hotspot.json, который я хочу импортировать в функцию jquery. Проблема, с которой я борюсь - это кавычки на значении точки доступа. Без них JSON-файл недействителен, но теперь он не работает.

[
{
"pitch": 14.1,
"yaw": 1.5,
"cssClass": "custom-hotspot",
"createTooltipFunc": hotspot,
"createTooltipArgs": "Baltimore Museum of Art"
},
{
    "pitch": -9.4,
    "yaw": 222.6,
    "cssClass": "custom-hotspot",
    "createTooltipFunc": hotspot,
    "createTooltipArgs": "Art Museum Drive"
    },
    {
        "pitch": -0.9,
        "yaw": 144.4,
        "cssClass": "custom-hotspot",
        "createTooltipFunc": hotspot,
        "createTooltipArgs": "North Charles Street"
    }
    ]    

Вот как я импортирую файл JSON в данный момент.

var hotspots = (function() {
$.ajax({
    'async': false,
    'global': false,
    'url': "/hotspot.json",
    'dataType': "json",
    'success': function (data) {
        hotspots = data;
    }
});
return hotspots;
})();

На данный момент я не знаю, с чего начать. Нужно ли что-то изменить в моем файле JSON или исправить проблему в файле JS? Может ли кто-нибудь помочь мне решить эту проблему?

Answer 1

Из комментариев можно понять, что целью является передача функции JavaScript в данных JSON. Это очень возможно, но я бы не советовал. Вот еще 3 вопроса, которые охватывают эту тему: первый, второй и третий.

Чтобы сделать это, вам нужно передать функцию в виде строки внутри JSON (например: "function doSomething() { alert("something");}") и на принимающей стороне вам придется проанализировать JSON и передать строку с кодом eval() функция.

Эта функция выполняет оценку строки во время выполнения и запускает ее как код. Я не рекомендовал бы это, поскольку это может быть медленным (особенно когда есть много кода для оценки). Кроме того, он также очень подвержен фальсификации конечным пользователем, поскольку любая строка будет оценена, конечно, это не проблема, если вы не используете пользовательский ввод и оцениваете только строки, поступающие с сервера.

Answer 2

Сначала вы можете получить горячие точки с помощью ajax и после использования результатов создать свой pannellum.viewer.

Предполагая, что ваш вызов ajax json возвращает массив с такой структурой:

[
    {
        "pitch": 14.1,
        "yaw": 1.5,
        "createTooltipFunc": hotspotDisplay1,
        "createTooltipArgs": "My hotspot 1"
    },
    {
        "pitch": -9.4,
        "yaw": 222.6,
        "createTooltipFunc": hotspotDisplay2,
        "createTooltipArgs": {
            text : "My hotspot 2"
            url : "https://your_url_2.com/"
        }
    },
    ...
]

Чтобы определить высоту и рыскание, добавьте опцию "hotSpotDebug" в pannellum.viewer ( см. Документацию библиотеки)

Функции для обработки отображения подсказок:

// Hot spot display creation function without link
function hotspotDisplay1(hotSpotDiv, args) {
    hotSpotDiv.classList.add('my-custom-tooltip1');
    var span = document.createElement('span');
    span.innerHTML = args + ' (my display without link)';
    hotSpotDiv.appendChild(span);
}

// Hot spot display creation function with link
function hotspotDisplay2(hotSpotDiv, args) {
    hotSpotDiv.classList.add('my-custom-tooltip2');
    var span = document.createElement('span');
    span.innerHTML = '<a href="' + args.url + '" target="_blank">' + args.text + '</a> (my display with link)';
    hotSpotDiv.appendChild(span);
}

Функция для создания вашего pannellum.viewer с результатом вызова ajax

function createPannellumViewer(hotspotList) {
    // Create viewer
    viewer = pannellum.viewer('yourElementId', {
        ...
        //"hotSpotDebug": true, // Use to display pitch/yaw
        "hotSpots": hotspotList
    });
}

Аякс сам звонит, когда документ готов

// Get hotspot with ajax
$.ajax({
    'url': "/hotspot.json",
    'dataType': "json",
    'success': function (data) {
        // Create pannellum.viewer
        createPannellumViewer(data);
    }
});