在网页上使用Jquery显示JSON对象元素_Jquery_Json

在网页上使用Jquery显示JSON对象元素

jquery json

在网页上使用Jquery显示JSON对象元素,jquery,json,Jquery,Json,我是Jquery和webapplication开发的新手，我有一个JSON文件定义为下面的对象我想阅读它并在网页上以HTML元素的形式显示它的元素对于下面的JSON文件，我希望输出如下： A-1 AA-0 AB-0 AAA-0 AAB-2 ABA-0 ABB-1 稍后，我计划在单击事件的当前组件下显示组件及其状态我写了

我是Jquery和webapplication开发的新手，我有一个JSON文件定义为下面的对象我想阅读它并在网页上以HTML元素的形式显示它的元素对于下面的JSON文件，我希望输出如下：

稍后，我计划在单击事件的当前组件下显示组件及其状态

我写了下面的代码

            <!DOCTYPE html>
            <html>
            <head>

                <script src="jquery-1.9.1.js"></script>
            </head>
            <body>
              <div id="result">

            </div>
            <script>
            var obj = {
                        "component": "A",
                        "status": 0,
                        "children": [
                            {
                                "component": "AA",
                                "status": 0,
                                "children": [
                                    {
                                        "component": "AAA",
                                        "status": 0,
                                        "children": []
                                    },
                                    {
                                        "component": "AAB",
                                        "status": 2,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "component": "AB",
                                "status": 0,
                                "children": [
                                    {
                                        "component": "ABA",
                                        "status": 0,
                                        "children": []
                                    },
                                    {
                                        "component": "ABB",
                                        "status": 1,
                                        "children": []
                                    }
                                ]

                            }
                        ]
            };
            //Start function
            $(function() {
                var result = $('#result');
                alert("hello");
                procedure(obj);
            });

            //Function to display the list of children of a given object
            function display(dref){

                result.append('<div>' +  dref.component + ' - '+ dref.status +'</div>');    
                $.each(dref.children, function(i, v){
                result.append('<div>' +  v.component + ' - '+ v.status +'</div>');
            });
            };

            //Recursive function to repeatedly check for children of every component
            function procedure(pref){
                display(pref);
                if(pref.children not null)
                {
                    $.each(pref.children, function(i, v){
                    procedure(children)

                    }    
            }   
            };
            </script> 
            </body>
            </html>


var obj={
“组成部分”：“A”，
“状态”：0，
“儿童”：[
{
“组件”：“AA”，
“状态”：0，
“儿童”：[
{
“组件”：“AAA”，
“状态”：0，
“儿童”：[]
},
{
“组件”：“AAB”，
“地位”：2，
“儿童”：[]
}
]
},
{
“组件”：“AB”，
“状态”：0，
“儿童”：[
{
“成分”：“ABA”，
“状态”：0，
“儿童”：[]
},
{
“组件”：“ABB”，
“地位”：1，
“儿童”：[]
}
]
}
]
};
//启动功能
$（函数（）{
var result=$（“#result”）；
警惕（“你好”）；
程序（obj）；
});
//函数显示给定对象的子对象列表
功能显示（dref）{
结果.追加（''+dref.component+'-'+dref.status+''）；
$。每个（dref.children，函数（i，v）{
结果.追加（''+v.component+'-'+v.status+''）；
});
};
//递归函数，用于重复检查每个组件的子级
功能程序（pref）{
显示（pref）；
if（pref.children不为空）
{
$。每个（首选子项、函数（i、v）{
程序（儿童）
}    
}   
};

有些地方出现语法错误，有人能帮我获得所需的输出吗

$(function(){
    var $result = $('#result');
    function process(obj, flag){
        if(!flag){
            $('<li/>').text(obj.component + '-'+obj.status).appendTo($result);
        }

        if(obj.children){
            $.each(obj.children, function(i, v){
                $('<li/>').text(this.component + '-'+this.status).appendTo($result);
            });
            $.each(obj.children, function(i, v){
                process(this, true);
            });
        }
    }

    process(obj);

});

$（函数（）{
var$result=$（“#result”）；
功能过程（obj，标志）{
如果（！标志）{
$（''）.text（obj.component+'-'+obj.status）.appendTo（$result）；
}
if（对象儿童）{
$。每个（对象子对象，函数（i，v）{
$（''）.text（this.component+'-'+this.status）.appendTo（$result）；
});
$。每个（对象子对象，函数（i，v）{
过程（这是真的）；
});
}
}
过程（obj）；
});

演示：

您在找这个吗：

var result_temp = "";
    function procedure(pref) {
        result_temp = result_temp + pref.component + "-" + pref.status+"<br/>";
        if (pref.children != null) {
            $.each(pref.children, function (i, v) {
                //alert(JSON.stringify(v));
                procedure(v);

            });
        }
    }

    $(document).ready(function () {
        procedure(obj); 
     $("#answer").html(result_temp);
    });

var结果_temp=”“；
功能程序（pref）{
结果温度=结果温度+pref.component+“-”+pref.status+“
”；
if（pref.children！=null）{
$。每个（首选子项、函数（i、v）{
//警报（JSON.stringify（v））；
程序（五）；
});
}
}
$（文档）.ready（函数（）{
程序（obj）；
$（“#答案”）.html（结果）；
});

这里“#answer”是您的结果div.

JSON在哪里？您的意思是您有一个文本JavaScript对象吗？如果它是一个对象，它就不能是JSON。JSON总是一个字符串。请注意

var isJSON='{“hellow”：“world”}；

和

var isObject={“hellow”：“world”}之间的区别是的，现在我把它硬编码为objThanks很多Arun，这就是我想要的开始，还有一件事，如果我想在单击组件时显示组件下的列表组件，你有什么建议吗？