Js: show JSON data in HTML-CodePudding

below i have JSON data for cafe menu and i want to view them in HTMl page as grid view showing image, name and price ... is there a way to do this in JS and HTML?

[
   {
        "placeImage": "assets/images/straw-1.jpg",
        "placeName":    " pizza",
        "price": 15000
    },
       {
        "placeImage": "assets/images/straw-1.jpg",
        "placeName":    " Burger",
        "price": 15000
    },   
]

CodePudding user response：

This partly depends on if you're processing that data on the server side or the client side. Either way, you can access the JSON data in your JS script like this:

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

If you're trying to create a dynamic HTML page with data from a server, then try using a templating language like EJS, which is the simplest to learn for a JavaScript developer. If you're on the client side then you'll need to use the DOM to insert that data into your HTML. For example, if you have an element in a product card like this: <div id="pizzaPriceDisplay">

Then you're JS code might look something like this:

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

Hope I helped and happy coding :)

CodePudding user response：

Sure! Lets asume that your JSON data is stored in a javascript string

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

The first thing to do would be to turn that json data into a javascript object that we can iterate. We can do that like this:

const data = JSON.parse(jsonData);

Cool, now, as far as i can tell you want to turn every item into an HTML element (like a card) and display all of them in a grid. The grid part can be pretty trivial now days using CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.

So somewhere in your HTML you would want to have an element like this:

...

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

...

And somewhere in your css you will have something like this

...

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

...

Now for the fun part. Taking your the contents of that data variable and turning them into 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));
}

And that's about it, you'll probably want to style the inserted elements a little better, which you can do adding a few classes here and there. But you probably get the gist of it.

For the particular data you gave in the example this should produce something similar to this:


<div  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>

CodePudding user response：

Simply parse the JSON to JS object

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

Then you can iterate over it using a loop and draw the HTML you want ex: Table

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);
}