HTML / jQuery: Have HTML DIVs change dynamically depending upon JSON data?

Question

I have a large JSON file which is essentially a huge array filled with elements. Using jQuery, I want to load this JSON file into the HTML page, convert it into an HTML object or table that is accessible using HTML. After doing this, I would create several DIVs on this HTML page with rounded corners to emulate a bar graph. Could the heights of these DIVs change, dynamically, depending upon the current JSON data stored on the server? How can I do all of this? I only need to know how to load the JSON data, convert the JSON data, and how to get the DIVs to change depending upon this data. Below is an example of the JSON data and sample DIV code.

In other words, I would want the DIV's height to be something like "height: data[1].key1;"

JSON sample:

  data: 
   [ { name: 'average',
       key1: x,
       key2: y,
       key3: z },

HTML div example:

<div style="    margin: 0px auto 10px;
            padding: 4px;
            opacity: 1; border: 1px solid rgb(0, 0, 0);
            box-shadow: 0px 0px 1px rgb(0, 0, 0) inset;
            color: rgb(255, 235, 124);
            float: left;
            width: 0px;
            height: data[1].key1;
            background: #222222;
            left: 55px; 
            position: absolute; 
            top: 259px;
            border-radius: 0px 0px 0px 0px;" class="pane">
</div>

Look at the many similar questions which have already been asked and answered -- you should see them along the right side of your screen. — tgies
– tgies, Commented Dec 29, 2012 at 15:57
"I only need to know how to load the JSON data, convert the JSON data, and how to get the DIVs to change depending upon this data." - Ah, only that. :P Get the JSON via Ajax, parse it with JSON.parse(), and then pass the object through a template, and inject the generated HTML into the DOM. (That's how I'd do it.) — Šime Vidas
– Šime Vidas, Commented Dec 29, 2012 at 16:00

hunterloftis · Accepted Answer · 2012-12-29 16:04:37Z

1

With jQuery you can do something like:

$('.divSelector').css({ 'height': data[1].key1 + 'px' });

answered Dec 29, 2012 at 16:04

hunterloftis

13.8k5 gold badges51 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

HTML / jQuery: Have HTML DIVs change dynamically depending upon JSON data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related