How can I properly format and display a JSON string inside a dynamically created Div using a forEach loop?
Here is my current code snippet:
<div id="container_div">
</div>
$scope.getJSON = () => {
var settings = {
"url": "https://api/json,
"method": "GET",
"timeout": 0,
};
$.ajax(settings).done(function (response) {
var container = document.getElementById("container_div");
container.innerHTML = "";
var content = "";
response.jsonData.forEach((data) => {
var json = JSON.parse(data.json);
var formatted = JSON.stringify(json).split(",").join("<br/>");
var removeSlash = formatted.split("/").join('replace');
content += `<div class="col-md-12 shadow p-3 mb-5 bg-white" style="max-height: 500px; overflow-x: auto; overflow-y: auto">
<p>${JSON.stringify(removeSlash)}</p> </div>`;
container.innerHTML += content;
});
$scope.$apply();
}).fail(function (error){
console.log(error);
});
}
The issue I am currently facing is that the final output div contains unwanted slashes, like this:
"{\"dob\":\"2021-03-17T19:32:24.163Z\"
\"codes\":[]
\"name\":\"Rahul\"}
{\"codes\":[]
\"type\":{\"codes\":[]}
\"name\":\"Rahul\"}]
\"someDate\":\"2021-03-17T19:42:56.934Z\"}"I have attempted to remove the slashes using split and join, but without success. How can I fix this issue?