How to read array from html to js

Question

I declare an array with json data, then when I init the array should be read and display on the div. But now show nothing, can anyone help me check my code, what mistake I have made. Thanks.

JS Fiddle

HTML

<script>
$(function() {


    var array = [];
    array[0] = {
        "no": "1",
            "name": "fruit",
            "value": "mango",
            "totalvote": "75"
    };
    array[1] = {
        "no": "2",
            "name": "fruit",
            "value": "apple",
            "totalvote": "10"
    };
    array[2] = {
        "no": "3",
            "name": "fruit",
            "value": "orange",
            "totalvote": "5"
    };
    array[3] = {
        "no": "4",
            "name": "fruit",
            "value": "banana",
            "totalvote": "45"
    };

    PG.init("popup_survey_whitebox_selection", "1", array);
    PG.callpopup();
    PG.render_1();

});
</script>

JS

    var PG = {
    divid: "",
    multiselection: "",
    optionitem: [],
    /*  type:"",        */
    init: function (divid, multiselection, optionitem) {
        /*     PG.type = type;*/
        PG.divid = divid;
        PG.multiselect = multiselection;
        PG.optionitem = optionitem;
    },
    test: function () {
        for (var i = 0; PG.optionitem.length > i; i++) {
            alert(PG.optionitem[i].name);
        }
    },
    callpopup: function () {
        $("#popup_survey_whitebox_content").hide();

        var orig = '', // create var to cache the original text
            newText = ''; // create var to cache the new Text with "..."

        $("label#popup_survey_label_title").text(function (index, currentText) {
            orig = currentText;
            newText = currentText.substr(0, 30);

            if (currentText.length > 30) newText += "...";

            return newText;
        });

        $("#popup_survey_whitebox").hover(function () {
            $('#popup_survey_whitebox_content').stop().animate({
                opacity: 1,
                height: "toggle"
            }, 500, function () {

                $("label#popup_survey_label_title").text(orig); // Here put the original text.

            }).css('position', 'relative');

        }, function () {
            $('#popup_survey_whitebox_content').stop().animate({
                opacity: 1,
                height: "toggle"
            }, 500, function () {
                $("label#popup_survey_label_title").text(newText); // Here put the new text with "..."

            }).css('position', 'relative');
        });

        $("#popup_survey_end_whitebox").click(function () {
            $("#popup_survey_whitebox").remove();
        });



    },
    render_1: function () {

        $.each(array, function (i, obj) {
            if (PG.multiselect == 1) {
                var selection = "<li class='popup_survey_whitebox_li'></li><input class='the_checkbox' type='radio' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
                    "<label class='popup_survey_whitebox_label' for=" + obj.value + ">" + obj.no + ". " + obj.value + "</label>" +
                    "<div class='popup_survey_whitebox_progressbar'><div class='popup_survey_whitebox_progressbar_inner' for=" + obj.value + " style='width:" + obj.totalvote + "%;'>" +
                    "</div></div>" +
                    "<div id='popup_survey_whitebox_percent' class='popup_survey_whitebox_percent'>" + obj.totalvote + "%</div>";

            } else {
                var selection = "<li class='popup_survey_whitebox_li'></li><input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
                    "<label class='popup_survey_whitebox_label' for=" + obj.value + ">" + obj.no + ". " + obj.value + "</label>" +
                    "<div class='popup_survey_whitebox_progressbar'><div class='popup_survey_whitebox_progressbar_inner' for=" + obj.value + " style='width:" + obj.totalvote + "%;'>" +
                    "</div></div>" +
                    "<div id='popup_survey_whitebox_percent' class='popup_survey_whitebox_percent'>" + obj.totalvote + "%</div>";
            }
            $("#" + PG.divid).append(selection);


        });
        var survey_button = "<br><input id='submit_btn' type='button' class='whiteboxbutton whiteboxbutton-small' value='Finish' style='width:100%;'>";

        $("#popup_survey_label_title").append("What is your favorite fruit??What is your favorite fruit??");
        /*$("#popup_survey_whitebox_title").append();*/
        $("#popup_survey_whitebox_inner_title").append("Please select 1 fruit only:");
        $('#popup_survey_whitebox_button').append(survey_button);


        $('.the_checkbox').on('change', function (evt) {
            $('.popup_survey_whitebox_percent').css('display', 'block');
            $('.popup_survey_whitebox_progressbar').css('display', 'block');
            $(".popup_survey_whitebox_button").show();
            if ($(this).siblings(':checked').length >= PG.multiselect) {
                this.checked = false;

            }
        });

    },


    save: function () {}
}

I console and get this error Uncaught ReferenceError: array is not defined but I must declare on html.

Mohit Pandey · Accepted Answer · 2015-01-06 04:31:45Z

2

There is other way around as well to solve this error besides closure. Since, you already have optionitem present in PG and you already passed the optionitem to it, you can use it as well inside render_1 method.

Change

$.each(array, function (i, obj) {

to

$.each(PG.optionitem, function (i, obj) {

With that, you need not to define array as a global variable which might conflict with others.

http://jsfiddle.net/5qnhcudp/2/

answered Jan 6, 2015 at 4:31

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

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

2 Comments

Turnerj Over a year ago

Haha, was just editing my answer as I noticed the same thing. +1

Mohit Pandey Over a year ago

Not an issue @Turnerj :)

Turnerj · Accepted Answer · 2015-01-06 04:35:49Z

1

Your array is in a closure. There is a couple of different things you could do but simply, you can just move your array declaration outside of the closure.

JSFiddle

<script>
var array = [];
$(function() {

    ...
});
</script>

Found another solution to your problem, your PG object is actually trying to reference the global scope where it doesn't need to. See, your inline script where you declare the array, you are passing that into the PG object.

You have this:

render_1: function () {
    $.each(array, function (i, obj) {
        ...
    });
}

Replace with this:

render_1: function () {
    $.each(PG.optionitem, function (i, obj) {
        ...
    });
}

This solution is actually independant from my first one. If you don't want the array in global scope, this solution will work.

edited Jan 6, 2015 at 4:35

answered Jan 6, 2015 at 4:13

Turnerj

4,3085 gold badges39 silver badges54 bronze badges

3 Comments

FeelRightz Over a year ago

hi, thanks u so much . Now it show but another problem come out, u can see the callpopup function, before I was put those code in document ready function, but my friend say should put inside the PG so can init easily, but when I put inside it affecting already.

Turnerj Over a year ago

Not sure if I fully understand you. The fiddle I have linked to in my answer show your code working now. I did modify your code so the javascript is included in the head tag rather than wrapped in a ready or onload event.

FeelRightz Over a year ago

as in ur updated jsfiddle, when hover the div the text suddenly disappear. Before I put in document ready function the title if longer will show ..., then when hover only show back the full title, now put in PG why affected ? did u know the problem ?

Collectives™ on Stack Overflow

How to read array from html to js

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related