Json parsing to add an iterating element by Jquery

To reduce load time and improve user experience we use ajax to get add new element to existing html.

let the response be:

[{
    "data1": "male",
    "data2": "23",
    "data3": "Delhi",
    "data4": "10+2 or above"
}, {
    "data1": "male",
    "data2": "40",
    "data3": "Delhi",
    "data4": "Diploma"
}, {
    "data1": "male",
    "data2": "31",
    "data3": "Delhi",
    "data4": "Graduation"
}, {
    "data1": "male",
    "data2": "25",
    "data3": "Delhi",
    "data4": "Post Graduation"
}]

let the response is saved in var response

let the place where response is appended is

<div><table id="append"></table></div>

to append the json store in data to “#append”

$("#append").append(response.map(data => `<tr><td>${data.data1}</td><td>${data.data2}</td><td>${data.data3}</td><td>${data.data4}</td></tr>`))

Jquery append function is an iterative function which will call response.map which will call parse json