如何附加 来自json结果

Question

我在控制器（MVC）中有一个JsonResult函数。我有一个按钮，单击后将为每个朋友添加带有选项的新选择。我尝试这样做：

$('#participants').append($('<div class="col-md-2"></div>'))
            .append($('<div class="input-group col-md-3"></div>')
        .append($('<span class="input-group-addon"></span>').text("Username"))
        .append($('<select name="userids" id="test" class="form-control"/>')
        .each(r, function (key, value) {
            $(this).append($('<option></option>').text(value.Text).val(value.Value))
        })
        )
        ).append($('<br>'));

在该功能之前，我有那些代码行：

var r;
var ur = '@Url.Action("FetchFriends", "Trip")';
$.getJSON(ur, function (response) {
    if (Object.keys(response).length) {
        r = response;
    }
});

但是它不起作用。任何人都知道什么会起作用吗？谢谢！

Answer 1

您不能那样使用$.each。看一下文档：jQuery.each() API Doc假设您的getJSON调用实际上返回了正确的数据。你会得到一个像这样的数组

[
  {text: 'Text 1', value: 1 },
  {text: 'Text 2', value: 2 },
  {text: 'Text 3', value: 3 }
];

我强烈建议编写一些函数来附加您的选择并添加选项，例如：

function addSelect( $element, addonText, selectName ) {
  let $wrapper = $('<div class="col-md-2"></div>');
  let $group = $('<div class="input-group col-md-3"></div>');
  let $addon = $('<span class="input-group-addon"></span>').text(addonText);
  let $select = $('<select name="'+ selectName +'" id="'+selectName+'" class="form-control"/>');
  $group.append($addon).append($select);
  $wrapper.append($group);
  $element.append($wrapper);
}

和

function addOptions($select, text, value) {
    $select.append($('<option></option>').text(text).val(value))
}

这样您就可以在getJSON方法中使用这些函数，如下所示：

$.getJSON(ur, function (response) {
    if (Object.keys(response).length) {
      $.each(response, function(key, value) {
        addSelect($('#participants), 'username', 'userids');
        let $select = $('#userids');
        addOptions($select, value.text, value.value);
      });
    }
});

工作示例：

let r = [
	{text: 'Text 1', value: 1 },
  {text: 'Text 2', value: 2 },
  {text: 'Text 3', value: 3 }
];

function addSelect( $element, addonText, selectName ) {
	let $wrapper = $('<div class="col-md-2"></div>');
  let $group = $('<div class="input-group col-md-3"></div>');
  let $addon = $('<span class="input-group-addon"></span>').text(addonText);
  let $select = $('<select name="'+ selectName +'" id="'+selectName+'" class="form-control"/>');
  $group.append($addon).append($select);
  $wrapper.append($group);
  $element.append($wrapper);
}

function addOptions($select, text, value) {
	$select.append($('<option></option>').text(text).val(value))
}

addSelect( $('#participants'), 'username', 'userids' );

$.each(r, function(key, value) {
	let $select = $('#userids');
  addOptions($select, value.text, value.value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="participants">

</div>