Question

Take this JSON Object as an example:

"pages": {
    "start": {
        ....
    },
    "page1": {
        ....
    },
    "page2": {
        ....
    },
    ....
}

Now via the jQuery ajax function I load the above JSON object and save it’s result into a variable. So far so good.
Then I have some html like this:

<div class="container" page-data="start">
    <h2></h2>
</div>    
<div class="container" page-data="start">
    <h2></h2>
</div>    
<div class="container" page-data="page1">
    <h2></h2>
</div>    
<div class="container" page-data="page2">
    <h2></h2>
</div>

Now I wrote this function to use the JSON data:

function createContent(el) {
    var page, $obj;
    page = [];
    $obj = el;
    $obj.each(function(index) {
        page[index] = $(this).attr('page-data');
        $(this).find('h2').html(jsonData.pages. + page[index] + .value);
    });
}
//here I start the function
$(document).ready(function(){
    createContent($('.container'));
});

What is not working is this part of the above function:

$(this).find('h2').html(jsonData.pages. + page[index] + .value);

This is pretty obvious, as the object notaion isn’t just a string value. Now, is there any way how I can combine this to a valid object notation?

Answer 1

Use the [] notation to access the object members.

...
$(this).find('h2').html(jsonData.pages[page[index]].value);
...