Parsing json object from a variable to classes where key = class

Question

I am trying to parse a json object from a variable in an each() object.

For example I have this long array:

{castle: "0", commercial: "3", common: "0", cultural: "2", dioni: "0", holidays: "0", island: "2", nereides: "2", others: "0", peninsula: "0", thetis: "0"}

and I have div's with the same classes as those keys of the array. For example:

<div class="castle"></div>
<div class="commercial"></div>
<div class="common"></div>
<div class="cultural"></div>

etc.

So I want to append the value of each key to the class where class = key.

$("body div").each(function(){
   var array = [] // the reall long array;

   var a = $(this).attr("class").split(' ')[0]; // in case there are two divs, split
   $("." + a).text(array.a + " hours"); // array.a doesn't work

});

In this case, array.a doesn't not exist in the array so I cannot parse the value of each key to each class.

How can I solve this?

@KhanhTO array["a"] won't work. I am trying to parse the variable a. Not the object a — jQuerybeast, Aug 03 '13 at 08:50
Variables `a` is a string containing a class name. It isn't any form of serialised data. It isn't something you can parse. The code you have in the question makes it look very much like you are trying to do exactly the same as the duplicate question. — Quentin, Aug 03 '13 at 08:59
@Quentin this is my entire code: http://pastebin.com/TpWLFZDf I am not trying to do what that "duplicated" question is trying to do. Maybe something a bit similar, but it is a different question which could have different solutions to that duplicate; which I believe it deserves its on page for answers — jQuerybeast, Aug 03 '13 at 09:02
@Quentin Or maybe it could have the same answer, but from a completely different approach. — jQuerybeast, Aug 03 '13 at 09:04
It's exactly the same. You have the property name in a variable `a`, hence you have to use `obj[a]` to access the property value. `obj['a']` would try to access the property with name `a` which is wrong of course. — Felix Kling, Aug 03 '13 at 10:23

krishwader · Accepted Answer · 2013-08-03T09:11:30.257

3

Why dont your do it the other way? Use a for..in to loop (per se) through the object and set it up :

for (var key in obj) {
    $("div." + key).text(obj[key]);
}

The selector inside this loop will find the div with the class which is equal to the key and append the corresponding value to it.

Demo : http://jsfiddle.net/hungerpain/9z4zj/

But, looking at your complication, I concur that your way is the easiest. Just change array.a to array[a]. That's all you need.

edited Aug 03 '13 at 09:11

answered Aug 03 '13 at 08:50

krishwader

11,341
1
34
51

This would be my actual code: http://pastebin.com/TpWLFZDf I'm not sure if for..in would work – jQuerybeast Aug 03 '13 at 08:53
Because not all the object in the array have a div with existing class, and not all div's need content. My question here is a summary – jQuerybeast Aug 03 '13 at 08:54
this line here : `var json = JSON.parse(req.responseText);`..try to do a console.log() on it. what does it return? – krishwader Aug 03 '13 at 08:56
the really long array I've posted, and some more. img incoming – jQuerybeast Aug 03 '13 at 08:57
http://i.imgur.com/ITnkIX7.png – jQuerybeast Aug 03 '13 at 08:58
As you can see, im not looking to parse every single key in the array. Just a few, where classes exist. So I gather up those classes with each(). – jQuerybeast Aug 03 '13 at 08:58
I think all you need to do is change this line : `$("." + a).text(array.a + " hours");` to `$("." + a).text(array[a] + " hours");` – krishwader Aug 03 '13 at 09:02
and try to alert(a) before you append the data, just to see how your `a` variable looks like – krishwader Aug 03 '13 at 09:04

score 0 · Answer 2 · answered Aug 03 '13 at 09:06

Try this:

$(document).ready(function () {
    $("body div").each(function () {
        var myarray = {
            castle: "0",
            commercial: "3",
            common: "0",
            cultural: "2",
            dioni: "0",
            holidays: "0",
            island: "2",
            nereides: "2",
            others: "0",
            peninsula: "0",
            thetis: "0"
        }; // the reall long array;

        var a = $(this).attr("class").split(' ')[0]; // in case there are two divs, split
        $("." + a).html(myarray[a] + " hours"); // array.a doesn't work
    });
});

JSFIDDLE DEMO

score 0 · Answer 3 · answered Aug 03 '13 at 09:09

Use array[a] instead of array.a

var obj = {castle: "0", commercial: "3", common: "0", cultural: "2", dioni: "0", holidays: "0", island: "2", nereides: "2", others: "0", peninsula: "0", thetis: "0"}

$("body div").each(function(){
   var array = [] // the reall long array;

   var a = $(this).attr("class").split(' ')[0]; // in case there are two divs, split

   $("." + a).text(obj[a] + " hours"); // array.a doesn't work

});

Working demo : http://jsfiddle.net/uNrKy/

Parsing json object from a variable to classes where key = class

3 Answers3