3

http://jsfiddle.net/phongphan117/a212my20/ I have a json variable and use jquery.each()to write html tag and create loop for add class in the object. If you look at my code, it's not work correctly. How to fix them?

var db = {
    "class" : [
        {
            "appearance": ["red-bg", "white-text"]
        },
        {
            "appearance": ["yellow-bg", "black-text"]
        },
        {
            "appearance": "red"
        },
        {
            "appearance": "yellow"
        },
        {
            "appearance": ""
        }
    ]
}
$.each(db.class, function (key, data) {
        console.log(data);
        $('main').append('<div class="box">text</div>');
        for (i=0; i<data.appearance.length; i++) {
            var classtext = data.appearance[i].toString();
            $('.box').addClass(classtext);
        }
});
header, main, footer { padding-left: 0px; }
.box { width: 100px; height: 100px; }
.red-bg { background-color: red; }
.yellow-bg { background-color: yellow; }
.white-text { color: white; }
.black-text { color: black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
</main>
phongphan117
  • 87
  • 1
  • 12
  • Firstly you need to put the last three items into an array. Next describe the exact problem, I'm sure that fix along isn't going to give you want you want. As you are adding the class to every `.box` in each loop. – Spencer Wieczorek Jul 31 '15 at 02:47
  • and when i test on local with "chrome -allow-file-access-from-files" for some reason. It isn't show any object on my page, but when I go to console, the json is working. But it don't make any object on my page. – phongphan117 Jul 31 '15 at 02:47
  • Please add some more information, in what way is your code not working? – Hurricane Development Jul 31 '15 at 02:53

1 Answers1

2

The problem is, you're passing some array and some strings, so when you have an array, the items are each item inside, ie:

["red-bg", "white-text"]
[0] = "red-bg"
[1] = "white-text"

but when it's a string, each item is a letter, ie:

"red"
[0] = "r"
[1] = "e"
[2] = "d"

so you can just update your class array to:

"class" : [
    {
        "appearance": ["red-bg", "white-text"]
    },
    {
        "appearance": ["yellow-bg", "black-text"]
    },
    {
        "appearance": ["red"]
    },
    {
        "appearance": ["yellow"]
    },
    {
        "appearance": [""]
    }
]

you'll also have to update your each function, since you're adding the classes to the same .box.

$('.box:last-child').addClass(data.appearance[i]);

Now you're adding the data.appearance to your last .box inserted!

and it'll works! see the jsfiddle https://jsfiddle.net/2z95ye56/1/

dpedoneze
  • 856
  • 8
  • 17
  • you have to add the `:last-child` to your `.box`, as I did here https://jsfiddle.net/2z95ye56/1/ – dpedoneze Jul 31 '15 at 02:54
  • yeah! it's work on jsfiddle! haha http://jsfiddle.net/phongphan117/a212my20/3/ Thank for your help. but when i test on local with "chrome -allow-file-access-from-files" for some reason. it's show blank page. – phongphan117 Jul 31 '15 at 02:57
  • this answer solves your problem with chrome http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode, but if you open in Firefox it'll work. – dpedoneze Jul 31 '15 at 02:59
  • You can also start a http server on your folder using python `python -m SimpleHTTPServer` (or rails or ...) and then this error should disappear :) – dpedoneze Jul 31 '15 at 03:01
  • This is a chrome-related bug, this website explains it a bit http://www.chrome-allow-file-access-from-file.com/. Question solved :) – dpedoneze Jul 31 '15 at 03:03
  • Can you check my code at here? And sorry to bother you. https://drive.google.com/file/d/0B8P5D5qjZSPtaURoRTUwQlZXdGM/view?usp=sharing – phongphan117 Jul 31 '15 at 03:19
  • Yes, You can try to download and test on your local computer. See my picture. It's seem my jquery can't write any tags in
    https://drive.google.com/file/d/0B8P5D5qjZSPtcUFQZW1UQ3gwcWs/view?usp=sharing
     – phongphan117 Jul 31 '15 at 03:31
  • If it's the same code as https://jsfiddle.net/2z95ye56/1/ it should works, since it works on the jsfiddle. I've download the jsfiddle code and it runs here on my local. I think now it's a `computer-related` problem. Did you try to open in firefox? – dpedoneze Jul 31 '15 at 03:36
  • BTW, can you check my answer as right if I your expected answer was https://jsfiddle.net/2z95ye56/1/ ? :) – dpedoneze Jul 31 '15 at 04:22
  • OK, I found my bug. The javascript code should be move to under `
    ` and move my js library to top of ``. Your code help me to apply anything that I want. Thank for your help very much.
     – phongphan117 Jul 31 '15 at 16:09