在jQuery函数中导入不带引号的json文件

Question

This is my hotspot.json file that I want to import inside a jquery function. The issue i struggle with are the quotation marks on the hotspot value. Without them the json file is not valid but now it is not working.

[
{
"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"
    }
    ]    

This is how i import the json file at this moment.

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

At this point i don't know where to start. Do i need to change something in my json file or fix the problem in the js file? Can someone help me to tackle this problem?

Answer 1

You can first get hotspots with ajax and after use results to create your pannellum.viewer.

Assuming your ajax json call return an array with this structure:

[
    {
        "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/"
        }
    },
    ...
]

To identify pitch and yaw, add option 'hotSpotDebug' in pannellum.viewer ( see library doc)

Functions to handle display of tooltips:

// 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);
}

Function to create your pannellum.viewer with result of ajax call

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

Ajax cal himself to call when document is ready

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

Answer 2

From the comments can be gathered that the goal is to pass a JavaScript function in the JSON data. It is very much possible but I would not recommend it. Here are 3 other questions that cover this topic: first , second and third .

In order to make this work you would have to pass the function as a string inside the JSON (for example: "function doSomething() { alert("something");}" ) and on the receiving end you will have to parse the JSON and pass the string with code to the eval() function.

What this function does is evaluate a string at run time and runs it as code. I would not recommend this as it can be slow (especially when there is a lot of code to evaluate). On top of that, it is also very susceptible to tampering by the end user since any string will be evaluated, of course this is less of an issue when you don't use user input and only evaluate strings that come from the server.