Javascript variables not accessible

Question

I have a function that will be triggered on click (using jQuery).

I don't understand why the following doesn't work and shows undefined.

var testFunc = function(event) {
    var data     = event.data;
    var category = data.category;
    var action   = data.action;
    var label    = data.label;

    console.debug(data);
    // prints:
    // {'category': 'CCC', 'action': 'AAA', 'label': 'LLL'}

    console.debug(data.category);
    // prints: undefined

    console.debug(category);
    // prints: undefined

    console.debug(data[category]);
    // prints: undefined
};
$(document).ready(function() {
    $('.test').on('click', function() {
        var jsonData;
        try {
            jsonData = JSON.parse($(this).data('test'));
        }
        catch (e) {
            // I guess here is the problem:
            jsonData = $(this).data('test');
            // ..but why JSON.parse doesn't work
        }

        try {
            testFunc({ data: jsonData });
        } catch (e) {
        }
    });
});

HTML:

<a href="about:blank" target="_blank" class="test"
   data-test="{'category': 'CCC'}">click event triggered here</a>

How to access event.data.category ?

FIDDLE: http://jsfiddle.net/ytqp45wj/

Is data a plain object, or some structure that implements toString differently ? — phtrivier
– phtrivier, Commented Jun 1, 2015 at 14:36

phtrivier · Accepted Answer · 2015-06-01 14:52:58Z

2

event.data is a string in your fiddle.

That's because your JSON in the data-test field is not valid. So you pass into the exception handler when parsing it, and you use the String itself.

(Seems like you can not use single quotes in JSON, according to http://jsonlint.com/)

As pointed elsewhere, you can use double quotes inside your data attribute to fix things.

Note that the data[category] would not work anyway, so you still get undefined for that.

edited Jun 1, 2015 at 14:52

answered Jun 1, 2015 at 14:42

phtrivier

13.5k9 gold badges54 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel W. Over a year ago

Tricky ! Solved it by changing the quotes like data-test='{"json":"val"}'

Hoyen · Accepted Answer · 2015-06-01 14:49:36Z

2

Your JSON data isn't formatted correctly. You need to use double quotes for the key values.

<a href="about:blank" target="_blank" class="test" data-test='{"category": "CCC", "action": "AAA", "label": "LLL"}'>click event triggered here</a>

answered Jun 1, 2015 at 14:49

Hoyen

2,5291 gold badge14 silver badges13 bronze badges

Comments

Felix · Accepted Answer · 2015-06-01 14:50:04Z

0

'use strict';

var event = {data:{
     category: 'CCC', 
     action:'AAA', 
     label: 'LLL'
}};


var testFunc = function(event) {
    var data = event['data'];
    var category = event['data']['category'];


    console.debug(data);
    console.debug(category);

    //get keys for every data entry
    Object.keys(data).forEach(function(key){
        console.log(key, data[key]);
    });
};

testFunc(event);

JSFiddle

You need to have a valid JSON object so you need to access to it using JSON notation.

edited Jun 1, 2015 at 14:50

answered Jun 1, 2015 at 14:49

Felix

3,1447 gold badges44 silver badges55 bronze badges

1 Comment

Felix Over a year ago

I made an ammed to my post.

Shon · Accepted Answer · 2015-06-01 15:02:15Z

0

To access nested object properties use [] notation, for example:

event['data']['category']

edited Jun 1, 2015 at 15:02

Shon

7006 silver badges22 bronze badges

answered Jun 1, 2015 at 14:37

ozil

7,1639 gold badges38 silver badges61 bronze badges

1 Comment

inorganik Over a year ago

There is no reason why you should have to use bracket notation instead of dot notation unless there are spaces in the var name

Collectives™ on Stack Overflow

Javascript variables not accessible

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related