带有jquery的特定于目标的Javascript对象文本字段和数组

我好像没法让它工作。我试着做两件事

A） 。获取以下代码以正确显示。第一个元素是show'undefined

<ul>
<li>Button
<ul>
 <li>x:1</li>
 <li>y:2</li>
 <li>width:3</li>
 <li>height:4</li>
</ul>
</ul>

钮扣

x:1
y:2
宽度：3
身高：4

这是我的密码：

$(document).ready(function() {
var data = {
    "Controls": [{
            "Button":[{ "x": "1","y": "2","width": "3","height": "4" }],

            "Image":[{"x": "5","y": "6","width": "7","height": "8"}],

            "TextField":[{"x": "9","y": "10","width": "11","height": "12"}]
        }]
}

var str = '<ul>';
$.each(data.Controls, function(k, v) {
    str += '<li>' + k[0] + '</li><ul>';
    for(var kk in v.Button[0]){
        str += '<li>' + kk + ':' + v.Button[0][kk] + '</li>';
    }
    str += '</ul>';
});
str += '</ul>';
$('div').append(str);
})

$（文档）.ready（函数（）{
风险值数据={
“控制措施”：[{
“按钮”：[{“x”：“1”，“y”：“2”，“宽度”：“3”，“高度”：“4”}]，
“图像”：[{“x”：“5”，“y”：“6”，“宽度”：“7”，“高度”：“8”}]，
“文本字段”：[{“x”：“9”，“y”：“10”，“宽度”：“11”，“高度”：“12”}]
}]
}
var str='
'；
$。每个（数据、控件、函数（k、v）{
str+='
'+k[0]+'
'；
用于（v.按钮[0]中的变量kk）{
str+='
'+kk+'：'+v.Button[0][kk]+'
'；
}
str+='
'；
});
str+='
'；
$（'div'）。追加（str）；
})

及

B） 。尝试仅显示字段的列表（与上面的列表分开）。像这样：

<li>Button</li>
<li>Image</li>
<li>TextField</li>

var data = {
    "Controls": {
            "Button":{ "x": "1","y": "2","width": "3","height": "4" },

            "Image":{"x": "5","y": "6","width": "7","height": "8"},

            "TextField":{"x": "9","y": "10","width": "11","height": "12"}
        }
}

$('div').append('<ul id="outer_ul">');
$.each(data.Controls, function(key, value) {
    $('#outer_ul').append('<li>' + key + '</li>', '<ul id="' + key +'">');
    $('#field_list').append('<li>' + key + '</li>');
    $.each(value, function(key2, value2) {
        $('#' + key).append('<li>' + key2 + ':' + value2 + '</li>');
    }
}

按钮
形象
文本字段

我认为第二个问题的答案在于第一个问题，但我似乎无法确定正确的目标

非常感谢您的帮助

要获取第一个列表，请执行以下操作：

var str = '<ul>';
var target = "Button";

str += '<li>' + target + '<ul>';
$.each(data.Controls[0][target][0], function(kk, vv){
    str += '<li>' + kk + ':' + vv + '</li>';
});
str += '</ul></li>';

str += '</ul>';

---

首先，这与JSON无关。JSON是一种字符串序列化格式。这里有一个对象文本

其次，我不知道为什么要将所有对象定义包装在控件中，并使用数组，这似乎是一个额外的麻烦。您也在以非常非jQuery的方式进行操作

您可以尝试以下方法：

<li>Button</li>
<li>Image</li>
<li>TextField</li>

var data = {
    "Controls": {
            "Button":{ "x": "1","y": "2","width": "3","height": "4" },

            "Image":{"x": "5","y": "6","width": "7","height": "8"},

            "TextField":{"x": "9","y": "10","width": "11","height": "12"}
        }
}

$('div').append('<ul id="outer_ul">');
$.each(data.Controls, function(key, value) {
    $('#outer_ul').append('<li>' + key + '</li>', '<ul id="' + key +'">');
    $('#field_list').append('<li>' + key + '</li>');
    $.each(value, function(key2, value2) {
        $('#' + key).append('<li>' + key2 + ':' + value2 + '</li>');
    }
}

var数据={
“控制措施”：{
“按钮”：{“x”：“1”，“y”：“2”，“宽度”：“3”，“高度”：“4”}，
“图像”：{“x”：“5”，“y”：“6”，“宽度”：“7”，“高度”：“8”}，
“TextField”：{“x”：“9”，“y”：“10”，“宽度”：“11”，“高度”：“12”}
}
}
$（'div'）.append（'ulid=“outer_ul”>）；
$.each（数据、控件、函数（键、值）{
$（“#外部”'）。追加（“
”+key+”
”，“
）；
$（“#字段列表”）。追加（“
”+key+”
）；
$.each（值，函数）（键2，值2）{
$（“#”+key）.append（“
”+key2+”：“+value2+”
）；
}
}

---

此代码使用

field\u list

的id填充您的

div

以及

ul

，该id表示您要将第二个列表放入其中的容器（因此根据您想要使用的适当jQuery选择器调整此代码）。

我刚刚尝试了它，但返回：0按钮：[object]Image:[object object]TextField:[object object]第二个功能非常好。第一个功能返回整个列表和子列表集。我希望一次只针对一个。我的示例是针对一个按钮。感谢一个bunchUpdated，只针对一个，由

var target=“Button”定义

。您是否可以提供一个基于索引编号和名称的解决方案，即“按钮”将是索引[0]。