Passing values to jQuery Click function

[rouse]

I wanted to pass two values to a click function and use the values to load a file in to a specific DIV. The file to load is called ‘displayTwo.txt' from the 'partialContent' directory and the DIV that the contents of the file will be place in has the ID of ‘mark03’. I do this by placing the following line in my menu:
<li role="presentation" id="param" data-options="{File: 'partialContent/displayTwo.txt', Id: '#mark03'}"><a href="#">ShowLink</a></li>
Next I have this jQuery function to perform the operation with some debug code.

   $('#param').click(function () {
        localData = $("#param").data('options');
        console.log("localData = " + localData + '\n');
        var file = localData.File;
        console.log("file = " + file + "\n");
        var id = localData.Id;
        console.log("Id = " + id + "\n");
        event.preventDefault();
        $(id).load(file);

    });
});

Well this does not work and at the end of this note is the output. I am able to grab the data in the variable “localData” but I am not able to collect the two parts File and Id to place them into the jQuery load function. I have tried various syntax form such as localData.Id or localData[Id] but neither works.
The following is the debug output. Note that I can see the values in the initial console.log of localData.

localJS.js:17 localData = {File: 'partialContent/displayTwo.txt', Id: '#mark03'}

localJS.js:19 file = undefined
localJS.js:21 Id = undefined
jquery-3.2.0.min.js:4 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at r.fn.init.r.fn.load (jquery-3.2.0.min.js:4)
    at HTMLLIElement.<anonymous> (localJS.js:23)
    at HTMLLIElement.dispatch (jquery-3.2.0.min.js:3)
    at HTMLLIElement.q.handle (jquery-3.2.0.min.js:3)
r.fn.load @ jquery-3.2.0.min.js:4
(anonymous) @ localJS.js:23
dispatch @ jquery-3.2.0.min.js:3
q.handle @ jquery-3.2.0.min.js:3

[jkon]

If localData is a JS object that has a public property Id then localData.Id or localData["Id"] will do the same thing ( not localData[Id] ).

There are many things we don't know for your code but the obvius one here is that you didn't defined the scope of localData variable inside the function.

Meaning:

var localData = $("#param").data('options');

instead of just:

localData = $("#param").data('options');

Reading your post once again I realized that localData is not a JS object , is just a String .....

you can use JSON.parse
@see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

[rouse]

I could not get my code to work by combining both parameters in one HTML5 data object, but solved this for my immediate needs by having two different data objects. Here is the HTML:

<li role="presentation" id="param" data-file='partialContent/displayTwo.txt' data-id ='#mark03'><a href="#">ShowLink</a></li>

Here is the java Script:

    $('#param').click(function () {
        var file = $("#param").data('file');
        console.log("file = " + file + '\n');
        var id = $('#param').data('id');
        console.log("id = " + id + '\n');
        event.preventDefault();
        $(id).load(file);
    });

Thanks for your thoughts jkon.