Update existing data Json with ajax post request

Question

I have a data.json. With GET request i put it in my index.html

 // example of data // "Rule": [ // { // "Name": "rule 1", // "RulebookID": 2, // "RuleId": 72, // "ID": "assotiated" // }, // { // "Name": "rule 2", // "RulebookID": 1, // "RuleId": 92, // "ID": "available" // }, $.ajax({ url: 'http://localhost:3000/Main', type: 'GET', headers: { accept: 'application/json;odata=verbose;' }, }) .done(rules) .fail((jqXHR, status, errorThrown) => { console.log(`problem loading data: ${errorThrown}`); }); function rules(data) { data.Rule.forEach((obj) => { $('#availableRules').append( `<div class="form-check" id="${obj.ID}"> <input class="form-check-input" type="checkbox" value="${obj.RuleId}" id="${obj.RuleId}"/> <label class="form-check-label" for="${obj.RuleId}">GDPR${obj.RulebookID} - ${obj.Name}</label> </div>`, }); 

 <div class="form-group"> <div class="checkboxes" id="availableRules"> </div> </div> 

then, when user manipulate with site, on changeId button click - div.form-check changing id to 'available'

 $('#changeId').click(() => { const p = $('#availableRules .form-check-input').parent('div').detach(); p.attr('id', 'available'); $('#availableRules').append(p); }); 

 <button class="btn btn-primary" id="changeId">Change id</button> 

How to handle this event and update Only Rule.ID value with ajax POST/PUT request and leave the same all another data?

Answer 1

When creating rule items, you may set ids which includes Rule.ID (ex:

itemHtml = `<span id="rule_${Rule.ID}>...</span>`

On response from back end, just select every item by ID and update innerHtml/value/style.

responseItems.forEach((item) => { $("#rule_"+item.ID).html = ...