0

json オブジェクトから html を作成しようとしています。私のjsonは次の構造になります。

[{"Property1":[{"IsDropDown":"true","Value":"Drp1Value1"},
    {"IsDropDown":"true","Value":"Drp1Value2"},
    {"IsDropDown":"false","Href":"Link1"}]}, 
{"Property2":[{"IsDropDown":"true","Value":"Drp2Value1"},
    {"IsDropDown":"true","Value":"Drp2Value2"},
    {"IsDropDown":"false","Href":"Link1"}]}]**

この json から、プロパティ IsDropDown と 1 つのアンカー リンク (IsDropDown == false) をチェックして、2 つのドロップダウンを作成する必要があります。プロパティ オブジェクト (Property1) の長さは固定されておらず、プロパティ内のネストされたオブジェクトも固定されていないことに注意してください。したがって、これを解決できるテンプレートが 1 つ以上必要です。

上記の json 出力から、値 Drp1Value1、DrpValue2 で構成される最初のドロップダウンと、値 Drp2Value1 および DrpValue2 で構成される 2 番目のドロップダウンのような 2 つのドロップダウンのようになります。IsDropDown が false の場合は、json オブジェクトから href を使用してアンカー タグを作成します (上記の json 2 ドロップダウンからそれぞれ 2 つの値を指定し、アンカー タグを作成する必要があります)。

サードパーティの API からのものであるため、json 構造を変更する方法はありません。どのテンプレート枠作品でも可能ですか？jTemplate と mustache.js を試しましたが、できませんでした。

4

2 に答える 2

1

JQFaq.comのこの作業サンプルを見てください。2 つのドロップダウン ボックスがあり、最初のドロップダウン値が変更されると、その子が json データに基づいて 2 番目のドロップダウンに表示されます。

コード：

var jsonData = [{
  "Property1": [{
    "IsDropDown": "true",
    "Value": "Drp1Value1"
  }, {
    "IsDropDown": "true",
    "Value": "Drp1Value2"
  }, {
    "IsDropDown": "false",
    "Href": "Link1"
  }],
  "Value": "Property1"
}, {
  "Property2": [{
    "IsDropDown": "true",
    "Value": "Drp2Value1"
  }, {
    "IsDropDown": "true",
    "Value": "Drp2Value2"
  }, {
    "IsDropDown": "false",
    "Href": "Link1"
  }],
  "Value": "Property2"
}];

var collection1 = [];
$.each(jsonData, function (key, value) {
  collection1.push(value.Value);
});

var $newOption = $.tmpl("<option>${Value}</option>", jsonData);
var $select = $("#Select1").append($newOption).change(function () {
  selectionChanged(this);
});
selectionChanged($select[0]);

function selectionChanged(select) {
  var selectedIndex = $.inArray(select.value, collection1);
  var newOpt = $.tmpl("<option>${Value}</option>", jsonData[selectedIndex][select.value]);
  $("#Select2").empty().append(newOpt);
}
于 2013-01-09T07:56:46.947 に答える
0

このブロックはおそらくあなたが苦労しているものです:

var i, j, p;
var out = '';
for (i=0; i < json.length; i++) {
  for (p in json[i]) {
    if (json[i].hasOwnProperty(p)) {
      out += 'select name='+p+'<br/>';
      for (j=0; j < json[i][p].length; j++) {
        if (json[i][p][j].IsDropDown == 'true') {
          out += ' option='+json[i][p][j].Value+'</br>';
        }
      }
      break; // from for loop, since we only want one select per top-level object
    }
  }
}

だから私は通常のforループで配列を繰り返しています。for inしかし、その後、「プロパティ」の名前をとで見つけていhasOwnPropertyます。

他のビジネス ロジックは実装していないことに注意してください。問題があるとは思えないからです。

ここで、このコードとデータのフィドルを見つけることができます: http://jsfiddle.net/5kKD9/

于 2013-01-08T20:07:35.157 に答える