Esto depende en parte de si está procesando esos datos en el lado del servidor o en el lado del cliente. De cualquier manera, puede acceder a los datos JSON en su secuencia de comandos JS de esta manera:

 const cafeData = require('./cafe.json'); // If it is in the same directory as the script console.log(cafeData);

Si está tratando de crear una página HTML dinámica con datos de un servidor, intente usar un lenguaje de plantillas como EJS, que es el más simple de aprender para un desarrollador de JavaScript. Si está del lado del cliente, deberá usar el DOM para insertar esos datos en su HTML. Por ejemplo, si tiene un elemento en una tarjeta de producto como este: <div id="pizzaPriceDisplay">

Entonces tu código JS podría verse así:

 const priceDisplay = document.querySelector('#pizzaPriceDisplay'); pizzaPriceDisplay.innerText = '$' + cafeData[0].price;

Espero haber ayudado y feliz codificación :)

¡Por supuesto! Supongamos que sus datos JSON se almacenan en una cadena de javascript

 const jsonData = "..."; //The JSON string

Lo primero que debe hacer sería convertir esos datos json en un objeto javascript que podamos iterar. Podemos hacer eso así:

 const data = JSON.parse(jsonData);

Genial, ahora, por lo que puedo decir, desea convertir cada elemento en un elemento HTML (como una tarjeta) y mostrarlos todos en una cuadrícula. La parte de la cuadrícula puede ser bastante trivial hoy en día usando CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout .

Entonces, en algún lugar de su HTML, le gustaría tener un elemento como este:

 ... <div class="grid-container" id="menu-items-container"> <!-- We are going to insert your rendered data here --> </div> ...

Y en algún lugar de tu css tendrás algo como esto

 ... .grid-container{ display:grid; /* ... */ } ...

Ahora viene la parte divertida. Tomando el contenido de esa variable de data y convirtiéndolos en html

 //This function will take the data of one item //And return an html element function renderItem(item){ const base = document.createElement("div"); const img = document.createElement("img"); const title = document.createElement("h1"); const price = document.createElement("h2"); img.src = item.placeImage; title.textContent = item.placeName; price.textContent = item.price; base.appendChild(img); base.appendChild(title); base.appendChild(price); return base; } const container = document.querySelector("#menu-items-container"); for (let item of data){ container.appendChild(renderItem(item)); }

Y eso es todo, probablemente querrá diseñar un poco mejor los elementos insertados, lo que puede hacer agregando algunas clases aquí y allá. Pero probablemente lo entiendas.

Para los datos particulares que proporcionó en el ejemplo, esto debería producir algo similar a esto:

 <div class="grid-container" id="menu-items-container"> <div> <img src="assets/images/straw-1.jpg"/> <h1>pizza</h1> <h2>15000</h2> </div> <div> <img src="assets/images/straw-1.jpg"/> <h1>Burger</h1> <h2>15000</h2> </div> </div>

Simplemente analice el objeto JSON a JS

 let menu = JSON.parse('[{"placeImage": "assets/images/straw-1.jpg", "placeName": "Pizza", "price": 15000},{"placeImage": "assets/images/straw-1.jpg", "placeName": "Burger","price": 15000}]');

Luego puede iterar sobre él usando un bucle y dibujar el HTML que desea, por ejemplo: Tabla

 function drawMenu(menu) { let tableElement = document.createElement("table"); // Draw the headers of the table let headerTableRowElement = document.createElement("tr"); let imageHeaderElement = document.createElement("th"); imageHeaderElement.innerText = "Image"; headerTableRowElement.appendChild(imageHeaderElement); let nameHeaderElement = document.createElement("th"); nameHeaderElement.innerText = "Name"; headerTableRowElement.appendChild(nameHeaderElement); let priceHeaderElement = document.createElement("th"); priceHeaderElement.innerText = "Price"; headerTableRowElement.appendChild(priceHeaderElement); tableElement.app.appendChild(headerTableRowElement); // Draw the items in the menu for (let i = 0; i < menu.length; ++i) { let item = menu[i]; let menuItemTableRowElement = document.createElement("tr"); let imageElement = document.createElement("td"); let image = document.createElement("img"); image.setAttribute("src", item.placeImage); imageElement.appendChild(image); menuItemTableRowElement.appendChild(imageElement); let nameElement = document.createElement("td"); nameElement.innerHTML = item.placeName; menuItemTableRowElement.appendChild(nameElement); let priceElement = document.createElement("td"); priceElement.innerHTML = item.price; menuItemTableRowElement.appendChild(priceElement); tableElement.appendChild(menuItemTableRowElement); } document.appendChild(tableElement); }