javascript - binding data to attribute by iterating

Question

I have the following ForEach in my razor where i am setting some values. It works fine. I can see my all values.

 @foreach (var item in Model.ConsultantDetails.ScopeOfSevrices)
     {
      <div id="optionValue" class="item" data-value=>@item.Name</div>
    }

Then i have an ajax call and get the result back. I want to set this data back to same DIV by iterating

 $.each(data.ConsultantDetails.ScopeOfSevrices, function (index) {
   $('optionValue').attr("data-value=>", data.ConsultantDetails.ScopeOfSevrices[index].Name);
  });

No luck, how do i achieve that?

Answer 1

1. use for loop instead of foreach, so we can set seprate id to each iteration

2. dont use data-value=> , instead use data-value=" " or some dummy value (here we use : item.Name)

   @for (int i = 0; i < Model.ProductTypeService.Count; i++)
     {
      var item = Model.ProductTypeService[i];
      var id = "optionValue" + i;
      <div id="@id" class="item" data-value="@item.Name">@item.Name</div>
     }
   

3. finally, in jquery, we can assign attribute value based on div id

    $.each(data.ProductTypeService, function (index) {
               $('#optionValue' + index).attr("data-value", data.ProductTypeService[index].Name + index);  //  + index // just to see different value
           });