CODEWITHSUNDEEP
jquery
loriensleafs
loriensleafs

Reputation: 2255

referencing JSON with element ID with jquery

So this is my first time using JSON with jquery and I have kind of an idea of what I'd like to do and any help, or getting pointed in the right direction would be greatly appreciated.

my HTML is set up like so:

<div id="agriculture" class="btn"><div>
<div id="treasurer" class="btn"><div>
<div id="war" class="btn"><div>
..... (about 16 of these)


<div id="content_container">
    <div id="title"></div>
    <img id="photo" src="" />
    <div id="summary"></div>
</div>

Then I was planning on setting up a bunch of JSON variables like so:

var agriculture = {
    "title": "Secretary of Agriculture",
    "location": "url for photo used",
    "summary": "summary of cabinet position"
};
var treasurer = {
    "title": "Secretary of the Treasury",
    "location": "url for photo used",
    "summary": "summary of cabinet position"
};
var war = {
    "title": "Secretary of War",
    "location": "url for photo used",
    "summary": "summary of cabinet position"
};

The goal of the set up here was when you click on ".btn" it takes the attr('id') and uses that to call on the correct variable from the JSON because they match and then put that content into the correct divs/img src of content container.

Is this a sound way of doing this? If it is or isn't an someone push me the right direction?

Thanks so much for any help!

Upvotes: 0

Views: 201

Answers (4)

Korvin Szanto
Korvin Szanto

Reputation: 4501

JSON is just JavaScript Object Notation, by doing var foo = { bar : "foobar" }, you are actually creating an object literal and storing it's properties in a variable.

Using the id of the element is a bad idea, as the id is supposed to be a unique identifier for an element, not a data store. In my example, I used data-attribute, but this could be anything you'd like.

HTML

<a href="#" class="data-accessor" data-attribute="foo">Click this for foo!</a><br />
<a href="#" class="data-accessor" data-attribute="bar">Click this for bar!</a><br />

JavaScript

var data = {
    foo : "You clicked foo!",
    bar : "You clicked bar!"
}

$('a.data-accessor').click(function() {
    var me = $(this);
    alert(data[me.attr('data-attribute')]);
    return false;
});

Check out this jsfiddle to see it in action.

And here's an example with multiple data points http://jsfiddle.net/gSgyP/

Upvotes: 1

Guffa
Guffa

Reputation: 700342

That's not JSON, that's Javascript object literals. JSON is a text format for representing data.

If you have declared the variables globally, you can access them as members of the window object:

$('.btn').click(function(){
  var id = $(this).attr('id');
  var obj = window[id];
  $('#title').text(obj.title);
  $('#photo').attr('src', obj.location);
  $('#summary').text(obj.summary);
});

Demo: http://jsfiddle.net/nZkfq/

Upvotes: 1

Ayman Farhat
Ayman Farhat

Reputation: 2080

It would be better to store your values within a dictionary structure with named keys instead of creating independent variables. Here is an example: 

var data = {
    agriculture: {"title" : "Secretary of Agriculture",
                     "location" : "url for photo used",
                     "summary" : "summary of cabinet position"
                 },

    treasurer:   {"title" : "Secretary of the Treasury",
                     "location" : "url for photo used",
                     "summary" : "summary of cabinet position"
                  }
};

and then to access your object: 

$('.btn').click(function(){
     var id = $(this).attr('id');
     console.log(data[id]);
});

Upvotes: 3

yckart
yckart

Reputation: 33408

I would do something like this:

var data = {
    agriculture: {
        title: "Secretary of Agriculture",
        location: "url for photo used",
        summary: "summary of cabinet position"
    },
    treasurer: {
        title: "Secretary of the Treasury",
        location: "url for photo used",
        summary: "summary of cabinet position"
    },
    war: {
        title: "Secretary of War",
        location: "url for photo used",
        summary: "summary of cabinet position"
    }
};

var $title = $('#title');
var $photo = $('#photo');
var $summary = $('#summary');

$('.btn').on('click', function () {
    console.log( data[this.id] );
    $title.html( data[this.id].title );
    $photo.attr('src', data[this.id].location );
    $summary.html( data[this.id].summary );
});

http://fiddle.jshell.net/87T3P/

Upvotes: 0

Related Questions