Importing json file inside jquery function without quotation marks

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?

Can you explain why you want the values to not have quotation marks? — yarwest, Apr 10 '17 at 07:44
Hello yarwest, Otherwise it is not working. Normally I have to put the hotspot config inside the function. Example: [link](https://pannellum.org/documentation/examples/custom-hot-spots/) But need it to be a external file. — Damenace, Apr 10 '17 at 08:01
From what I can see in the link that you sent, you want to put the hotspot function inside the JSON data? — yarwest, Apr 10 '17 at 08:26
Yes, but i am not sure that is possible. If not... is there another approach? — Damenace, Apr 10 '17 at 08:34

Camille · Answer 1 · 2017-04-10T09:08:26.217

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

Hi Camille, Thank you! If I want to import a "normal" hotspot like your example it is all working. The issue starts when I want to import a "custom" hotspot See: [link](https://pannellum.org/documentation/examples/custom-hot-spots/) This needs different values. One of them is "createTooltipFunc": hotspot where hotspot is a function whitout quotes. — Damenace, Apr 10 '17 at 08:52
I add an example with custom tooltip display functions. In your code _"createTooltipFunc": hotspot_ wait _hotspot_ to be a function to render hotspot, not hotspot coordinates and text. — Camille, Apr 10 '17 at 09:05
I think my main question was not correct. Because i use the script for multiple panoramas I need an external file with the config.json and hotspots.json specific for that pano. At this moment all is working fine with the standard hotspots. I will see how I can use your example and let you know. Thanks! — Damenace, Apr 10 '17 at 10:41

score 0 · Answer 2 · edited May 23 '17 at 10:30

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.

Importing json file inside jquery function without quotation marks

2 Answers2