javascript - JavaScript 的问题

Question

我是 javascript 新手，在使用 javascript 迭代列表时遇到问题。 我需要用JS编写以下代码:

@foreach (var item in (IEnumerable<IGrouping<string, OnlineCarStore.Models.Model>>)ViewBag.TestList)
{
<optgroup label=@item.Key>
  @foreach (var item2 in item.ToList())
 {
    <option value="mercedes">@item2.Name</option>
 }
</optgroup>
}

我开始编写代码:

    $.each(models, function (i, model) {
       $("#models").append
       ('<optgroup label="' + model.Key + '">    </optgroup>');                        }); 

但我不断收到消息，model.Key 未定义。 你能帮我解决这个问题吗？ 我怎样才能用 JS 来完成第二个 foreach 才能正常工作..

@foreach (var item2 in item.ToList())
 {
    <option>@item2.Name</option>
 }

我在 Controller 中定义了模型列表:

 var testList = modelRepository.GetModel().Where(m => m.MakeID ==number).GroupBy(m => m.GroupName).ToList();

IEnumerable<IGrouping<string, Model>> models = testList;

，我将它与 Json 一起发送到 View ，如下所示:

 return Json(models, JsonRequestBehavior.AllowGet);

正如您在此屏幕截图中看到的，列表不为空，并且它包含键，并且它有一个也不为空的元素列表。 我在 Razor View 中编写的 foreach (我复制粘贴到问题中)工作正常，但我在 JS 中需要它。

任何帮助表示赞赏!提前致谢!

我通过 console.log(JSON.stringify(models)) 得到这个结果:

Answer 1

对于这种基本的 DOM 片段操作/追加，最好不要对事件元素进行字符串操作和单独的追加；使用文档片段并使用/创建文档元素。代码也更干净、更实用等。这仅使用 JS，没有 JQuery 等(尽管这也很好)。

<script type="text/javascript">

// Assumes your model actually has the required methods and properties.
// Tried to more or less approximate your model here
let ViewBag = { TestList : [ { Name : 'TheName_1' }, { Name : 'TheName_2' } ] };
let models = [ 'Mercedes', 'Jaguar' ];

let doc_frag = document.createDocumentFragment();

models.forEach ( model => {
    let optgroup = document.createElement( 'optgroup' );
    optgroup.label = model;

    ViewBag.TestList.forEach ( listItem => {
        let opt = document.createElement ( 'option' );
        opt.value = listItem.Name;
        opt.innerText = listItem.Name;
        optgroup.append ( opt ); 
    } );

    doc_frag.append ( optgroup );
} );

// Assumes something like <div id="models"></div> exists
let models_elem = document.querySelector ( '#models' );
models_elem.append ( doc_frag );

</script>

输出(来源):

<div id="models">
<optgroup label="Mercedes">
<option value="TheName_1">TheName_1</option>
<option value="TheName_2">TheName_2</option>
</optgroup>
<optgroup label="Jaguar">
<option value="TheName_1">TheName_1</option>
<option value="TheName_2">TheName_2</option>
</optgroup>
</div>