CODEWITHSUNDEEP
jqueryjsonajaxasp.net-mvc
Marcelo
Marcelo

Reputation: 824

Update HTML value for each JSON Value

I'm trying to update each value from a div on a view by getting a JSON from a controllers action. I'm currently able to target every div but I do not know how to read every JSON value.

This is my div:

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

This is my Ajax getting the JSON:

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

The condition should be something like:

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

JSON looks like this:

[{"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}]

And my controller looks like this:

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);
    }

Anyone could help me with this?

Upvotes: 3

Views: 54

Answers (1)

Igor
Igor

Reputation: 15893

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>

Upvotes: 1

Related Questions