jquery - 更新每个 JSON 值的 HTML 值

Question

我试图通过从 Controller 操作获取 JSON 来更新 View 上 div 的每个值。 我目前能够定位每个 div，但我不知道如何读取每个 JSON 值。

这是我的 div:

 <div class="progress" style="background: white" value="@item.CompletionRate"
     data-acr="@item.Acronym"></div>

这是我的 Ajax 获取 JSON:

$.ajax({
    url: "/Home/ModelsUpdate",
    success: function(result) {
        console.log(result);
        $('.progress').each(function () {
            // JSON condition should be here
        });
        drawCircles();
    }
});

条件应该是这样的:

var acr= $(this).attr('acr'); //referring to .progress data-acr field
each(result){
    if(result.Acronym == acr){
        $(this).data('value', result.CompletitionRate)
    }

JSON 看起来像这样:

[{"Name":"Raw To Common","Acronym":"RTC","Status":"Running","CompletionRate":11,"Started":"\/Date(1513220400000)\/","Ended":null},{"Name":"ePack","Acronym":"EPK","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Finished Goods Long Constrained","Acronym":"FLC","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Raw Material Long Term Constrained","Acronym":"RLC","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Finished Goods Long Term Unconstrained","Acronym":"FLU","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Finished Goods Short Term Constrained","Acronym":"FSC","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Finished Goods Short Term Unconstrained","Acronym":"FSU","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Raw Materials Long Term Unconstrained","Acronym":"RLU","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null},{"Name":"Finished Goods Long Term Fixed Supply","Acronym":"FLF","Status":"Not Started","CompletionRate":0,"Started":null,"Ended":null}]

我的 Controller 看起来像这样:

public JsonResult ModelsUpdate()
    {
        DateTime minDate = DateTime.Today;
        DayOfWeek todayDay = DateTime.Today.DayOfWeek;
        DateTime resultminDate = new DateTime();
        resultminDate = CalculateminDate(minDate,todayDay);


        var viewModel = CacheHelper.Current.Get(resultminDate);

        return Json(viewModel, JsonRequestBehavior.AllowGet);
    }

有人可以帮我解决这个问题吗？

Answer 1

var result = [{
    "Name": "Raw To Common",
    "Acronym": "RTC",
    "Status": "Running",
    "CompletionRate": 11,
    "Started": "\/Date(1513220400000)\/",
    "Ended": null
  },
  {
    "Name": "ePack",
    "Acronym": "EPK",
    "Status": "Not Started",
    "CompletionRate": 0,
    "Started": null,
    "Ended": null
  },
  {
    "Name": "Finished Goods Long Constrained",
    "Acronym": "FLC",
    "Status": "Not Started",
    "CompletionRate": 0,
    "Started": null,
    "Ended": null
  }
]

$(".progress").each(function(element) {
  var acr = $(this).data('acr');
  var item = result.find(item => item.Acronym == acr);
  if (item) {
    $(this).attr("value", item.CompletionRate);
    $(this).text(item.Acronym + ' - ' + item.Status);
  } else {
    console.log(acr, "Not found.");
  }
});

.progress {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress" style="background: white" value="0" data-acr="RTC"></div>
<div class="progress" style="background: white" value="0" data-acr="EPK"></div>
<div class="progress" style="background: white" value="0" data-acr="FLC"></div>