3

jquery getJson を使用して json ファイルを解析しようとしています。最初のレイヤーをループしても問題ありませんが、ネストされた配列を li にも割り当てる必要があります。

私のJSONコード

{"Controls":[
{
    "Object":"Button",
    "ButtonAttr": [{"x": "1","y": "2","width": "3","height": "4"}]
},
{
    "Object":"Image",
    "ButtonAttr": [{"x": "5","y": "6","width": "7","height": "8"}]
},
{
    "Object":"TextField",
    "ButtonAttr": [{"x": "9","y": "10","width": "11","height": "12"}]
}
]}

JSONの最初のレイヤーを取り込んでliに追加するのに問題がない私のJS/JQUERYコード。「ButtonAttr」レイヤーを取得する方法を理解する必要があります

 //Get JSON File which contains all Controls
$.getJSON('controls.json', function(data) {
    //Build Objects List
    var objectList="<ul>";
    for (var i in data.Controls) {
        objectList+="<li>" + data.Controls[i].Object +"</li>";
    }

    objectList+="</ul>";
    $('#options').append(objectList);

    //Add new Code Object based on #Options LI Index
    $(document).on('click','#options li', function() {
        var index = $('#options li').index(this);
        $('#code').append('<li>' + data.Controls[index].Object + '</li>');
        //Shows Selected LI Index
        $('#optionsIndex').text("That was div index #" + index);
    });

});

私の人生では、2番目の配列をループして、x、y、幅、および高さのフィールドをリストすることはできません。

ここに私の望ましい出力があります

<ul>
<li>Button</li>
<ul>
    <li>x:1</li>
    <li>y:2</li>
    <li>width:3</li>
    <li>height:4</li>
</ul>
<li>Image</li>
<ul>
    <li>x:5</li>
    <li>y:6</li>
    <li>width:7</li>
    <li>height:8</li>
</ul>
<li>TextField</li>
<ul>
    <li>x:9</li>
    <li>y:10</li>
    <li>width:11</li>
    <li>height:12</li>
</ul>
</ul>

どんな助けでも大歓迎です

4

4 に答える 4

1

forループなどでやろうとする苦労を省き、 json2html.comのようなクライアント側のテンプレートを使用してください

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='http://json2html.com/js/jquery.json2html-3.1-min.js'></script>

<ul id='out'></ul>

<script>

var data = 
{"Controls":[
    {
        "Object":"Button",
        "ButtonAttr": [{"x": "1","y": "2","width": "3","height": "4"}]
    },
    {
        "Object":"Image",
        "ButtonAttr": [{"x": "5","y": "6","width": "7","height": "8"}]
    },
    {
        "Object":"TextField",
        "ButtonAttr": [{"x": "9","y": "10","width": "11","height": "12"}]
    }
]};

var template = {"tag":"li","children":[
  {"tag":"span","html":"${Object}"},
  {"tag":"ul","children":[
    {"tag":"li","html":"x: ${ButtonAttr.0.x}"},
    {"tag":"li","html":"y: ${ButtonAttr.0.y}"},
    {"tag":"li","html":"width: ${ButtonAttr.0.width}"},
    {"tag":"li","html":"height: ${ButtonAttr.0.height}"}
   ]}
  ]};

$('#out').json2html(data.Controls,template);

</script>
于 2012-12-28T05:04:22.283 に答える
1

私は別の質問でこれを解決しました。

jsonでカンマ区切りのオブジェクトを処理するには? ( [オブジェクト オブジェクト],[オブジェクト オブジェクト] )

<ul> を開始し、リスト内の各項目に <li> を追加する再帰関数が必要です。また、アイテムをテストし、それ自体がリストである場合、そのデータの一部を引数として自分自身を呼び出します。関数が関数内から呼び出されるたびに、<ul> 内に <ul> が含まれます。

function buildULfromOBJ(obj){
  var fragments = [];

  //declare recursion function
  function recurse(item){
    fragments.push('<ul>'); // start a new <ul>

    $.each(item, function(key, val) {  // iterate through items.

      if((val != null) && (typeof val == 'object') &&   // catch nested objects
               ((val == '[object Object]') || (val[0] == '[object Object]'))){

        fragments.push('<li>[' + key + '] =></li>'); // add '[key] =>'
        recurse(val);            // call recurse to add a nested <ul>

      }else if(typeof(val)=='string'){  // catch strings, add double quotes

        fragments.push('<li>[' + key + '] = \"' + val + '\"</li>');

      }else if($.isArray(val)){         // catch arrays add [brackets]

        fragments.push('<li>[' + key + '] = [' + val + ']</li>');

      }else{                            // default: just print it.

        fragments.push('<li>[' + key + '] = ' + val + '</li>'); 
      }
    });
    fragments.push('</ul>'); // close </ul>
  }
  // end recursion function

  recurse(obj);            // call recursion
  return fragments.join('');    // return results
}  // end buildULfromOBJ()
于 2012-12-26T22:14:46.597 に答える
0

あなたはこのようにそれをすることができます..$。eachとforinloopを使用して

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

フィドル

または2つの$.eachループ

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

フィドル

于 2012-12-26T22:39:06.483 に答える
0

次のように、最初の配列と同じくらい簡単に 2 番目の配列をループできます。

$(document).on('click','#options li', function() {
    var index = $('#options li').index(this);
    $('#code').append('<li>' + data.Controls[index].Object + '</li>');

    // Create a new sub-UL to after the LI
    var $subUl = $(('<ul>')
    // Iterate through each attribute in ButtonAttr
    $.each(data.Controls[index].ButtonAttr, function(key, value){
        // Append a new LI with that attribute's key/value
        $subUl.append('<li>' + key + ':' + value + '</li>');
    });
    // Append that new sub-UL we made after the last LI we made
    $('#code li:last').after($subUl);

    //Shows Selected LI Index
    $('#optionsIndex').text("That was div index #" + index);
});
于 2012-12-26T22:09:24.303 に答える