如何从html读取数组到js

Question

我用 json 数据声明了一个数组，然后当我 init 数组应该被读取并显示在 div 上。但是现在什么也没显示，谁能帮我检查我的代码，我犯了什么错误。谢谢。

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 () {}
}

我安慰并收到此错误 Uncaught ReferenceError: array is not defined 但我必须在 html.

上声明

Answer 1

您的数组在 closure 中。您可以做几件不同的事情，但简单地说，您可以将数组声明移到闭包之外。

JSFiddle

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

    ...
});
</script>

找到了您问题的另一个解决方案，您的 PG 对象实际上是在尝试引用它不需要的全局范围。看，你声明数组的内联脚本，你正在将它传递给 PG 对象。

你有这个：

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

替换为：

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

这个解决方案实际上独立于我的第一个解决方案。如果您不希望该数组在全局范围内，此解决方案将起作用。

Answer 2

除了closure之外，还有其他方法可以解决这个错误。因为，您已经在 PG 中存在 optionitem 并且您已经将 optionitem 传递给它，所以您也可以在 render_1 方法中使用它。

改变

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

到

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

因此，您无需将 array 定义为可能与其他变量冲突的全局变量。

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

如何从html读取数组到js

How to read array from html to js

html

javascript

css

arrays

jquery