Cómo mostrar una cadena json formateada dentro de Div creado dinámicamente usando el bucle forEach.
Mi código -
<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); }); } }El único problema al que me enfrento actualmente es que obtengo "/" en el div de salida final como-
"{\"dob\":\"2021-03-17T19:32:24.163Z\" \"codes\":[] \"name\":\"Rahul\"} {\"codes\":[] \"type\":{\"codes\":[]} \"name\":\"Rahul\"}] \"someDate\":\"2021-03-17T19:42:56.934Z\"}"He intentado eliminar la barra inclinada usando dividir y unir, pero eso no funciona. Cómo puedo resolver esto
En primer lugar, lo más probable es que esté analizando la respuesta del servidor, en lugar de iterar la respuesta y analizar elementos individuales.
En segundo lugar, dice que está obteniendo un "/" en su salida, pero solo veo "\", que es lo que hará JSON.stringify para escapar de las comillas en una cadena JSON.
Pero la verdadera llamada de ayuda aquí es la forma en que estás manipulando el DOM. En angularJS, no busca elementos en el DOM y agrega innerHTML. Utiliza los métodos angulares incorporados. Aquí hay un ejemplo
angular.module('myApp', []) .controller('myCtrl', ['$scope', '$http', function($scope, $http) { $http({ method: "get", url: "https://jsonplaceholder.typicode.com/todos" }).then(function(response) { $scope.todos = response.data; }) }]); li { color: #666; } .completed { color: green; font-weight: bold; } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="todo in todos" ng-class="{'completed':todo.completed}">{{todo.title}}</li> </ul> </div>No necesita JSON.stringify en la cadena de plantilla
let s = "{\"dob\":\"2021-03-17T19:32:24.163Z,\"codes\":[],\"name\":\"Rahul\"},{\"codes\":[],\"type\":{\"codes\":[]},\"name\":\"Rahul\"}],\"someDate\":\"2021-03-17T19:42:56.934Z\"}"; s = s.replace(/,/g, "<br/>"); document.querySelector('body').innerHTML = `<div class="col-md-12 shadow p-3 mb-5 bg-white" style="max-height: 500px; overflow-x: auto; overflow-y: auto"> <p>${s}</p> </div>`;