Question

I am trying to attach some data to options in a select menu of a particular class using jquery data() that are coming from a jquery ajax() call. But I am getting the error that it is not getting attached when I try to call it. Or, more accurately that it is not getting applied at all, as the console.log($(this).data('address'.vendorName)); in the antipenultimate line of code below gives me the error Uncaught TypeError: Cannot read property 'vendorName' of undefined

The inner $.each() loop is a last-stab attempt because I thought that perhaps just using
$('.vendor_address_id_' + id).data.... wasn’t being applied to all the elements with that class. But I don’t really think it should be necessary. What am I doing wrong?

$.each(returnedData, function (key, val) {
    var id = val.id;

    //attach address information to each select option for display in .vendor_full_address_table
    $('.vendor_address_id_' + id).each(function (k, v) {

        $(this).data('address', {
            'vendorName': val.vendor_name,
            'address1': val.address1,
            'address2': val.address2,
            'city': val.city,
            'state': val.state,
            'zip': val.zip
        });
        //gives error: Uncaught TypeError: Cannot read property 'vendorName' of undefined 
        console.log($(this).data('address').vendorName);
    });
});



//console.log(returnedData);
Object
    address_0: Object
        address1: "street address1"
        address2: ""
        city: "Kalamazoo"
        id: "15"
        state: "MI"
        vendor_name: "companyA"
        zip: "123456"
    address_1: Object
        etc...
        etc...
        etc...
    address_2: Object
        etc...
        etc...
        etc...

Answer 1

Instead of

val.vendor_name

Use

returnedData.vendor_name

Here val is the Value of the particular returnedData[key] value in the iteration.

And you are trying to access a property from a primitive type which is the val here .