data = [ { "id" : "1", "prepare" : "Hello welcome to xyz portal || 1. Please login to system || 2. Open dashboard || Verify your details and confirm." }, { "id" : "2", "prepare" : "Hello welcome to portal || a. Please click on link || b. Open the details list items || Check and confirm the details." } ]Necesito preparar HTML DOM a partir de este JSON, como el párrafo en la etiqueta P y los elementos numerados o alfabéticos en los elementos de la lista. Estoy intentando como a continuación poner todo en la etiqueta P, incluidos el número y los alfabetos.
Pero necesito que esos números/alfabetos se coloquen dentro de las etiquetas ol/ul/li y el tipo debe mostrarse desde el tipo de estilo de lista en css, ayúdenme, ¿cómo podemos hacer eso?
var htmlArray = []; for (i = 0 ; i< data.length ; i++){ var dataString= data[i].prepare.split("||"); for(j = 0 ; j<dataString.length; j++){ var htmlString = "<p>"+dataString[i]+"</p>"; htmlArray.push(htmlString); } } htmlDOM = "<div>"+htmlArray.join('')+"</div>";Puedes hacer lo siguiente:
<ul id="jsonDiv"></ul> <script> data = [ { id: "1", prepare: "Hello welcome to xyz portal || 1. Please login to system || 2. Open dashboard || Verify your details and confirm.", }, { id: "2", prepare: "Hello welcome to portal || a. Please click on link || b. Open the details list items || Check and confirm the details.", }, ]; var htmlArray = []; for (i = 0; i < data.length; i++) { var dataString = data[i].prepare.split("||"); for (j = 0; j < dataString.length; j++) { var htmlString = "<p>" + dataString[j] + "</p>"; htmlArray.push(htmlString); } } htmlDOM = "<div>" + htmlArray.join("") + "</div>"; var targetDiv = document.getElementById('jsonDiv'); targetDiv.innerHTML = htmlDOM; </script>puedes hacer algo como esto
const data = [ { "id" : "1", "prepare" : "Hello welcome to xyz portal || 1. Please login to system || 2. Open dashboard || Verify your details and confirm." }, { "id" : "2", "prepare" : "Hello welcome to portal || a. Please click on link || b. Open the details list items || Check and confirm the details." } ] const container = document.getElementById('container') const formatHtml = ([p,...li]) => `<p>${p}</p><ul>${li.map(l => `<li>${l}</li>`).join('')}</ul>` const html = data.map(d => `<div>${formatHtml(d.prepare.split(' || '))}</div>`).join('') container.innerHTML = html <div id="container"></div>