How to transform JSON data in webpage and put the data to specific div?

Question

I am new to front-end, I have been looking for hints/relevant solutions in the past few weeks but still no luck. I hope I can solve it out here...I am currently building my first website. I am making a "find recipes" website, since I don't know anything about API call, I created a local Json file which has a few recipes data. The format looks like this:

[
  {
        "name": "Fresh Pumpkin Puree (for Pumpkin Pie Filling)",
        "description": "Homemade pumpkin purée. Roasting and draining is the secret to a perfect pumpkin pie filling that will reach canned pumpkin consistency. Use sugar pumpkins(~8 inches, 25 cm in diameter) instead of big pumpkins.",
        "tag": [
            "Puree",
            "Dessert"
        ],
        "ingredient": [
            {
                "amount": "3",
                "unit": "pounds",
                "name": "pumpkin"
            }
        ],
        "step": [
            {
                "description": "Preheat your oven to 375℉ (190℃) F. Cut each sugar pumpkin in half and scoop out the pulp and seeds. We use a grapefruit spoon which seems to help clean out the pulp but a soup spoon works just fine."
            },
            {
                "description": "Line a rimmed baking sheet with parchment paper. Place pumpkin halves cut side down on the paper and roast for 45 minutes until soft and easily pierced with knife, fork or skewer.",
                "img": "stepimg/pumpkin2.jpg"
            },
            {
                "description": "Carefully flip the pumpkin halves cut side up and return to the oven and roast for another 30 minutes.",
                "img": "stepimg/pumpkin3.jpg"
            },
            {
                "description": "Remove from the oven and cool for about 5 minutes. Scoop out the flesh from the skins into the bowl of a food processer. Process until very smooth, several minutes."
            },
            {
                "description": "Transfer the pumpkin purée to a fine-mesh strainer or colander lined with cheesecloth and set over a bowl. Drain for at least one hour.",
                "img": "stepimg/pumpkin5.jpg"
            },
            {
                "description": "Add the wine. Tip: pour the wine into the tomato paste jar and shake it to get the last of the paste out."
            },
            {
                "description": "Add canned tomatoes, cumin, caraway seeds, bay leaves, paprika, erythritol, concentrated stock, and pepper. Yes, that is a lot of cumin; it will be fine. Bring to low boil, reduce heat, simmer for 20 min"
            },
            {
                "description": "Place de-stemmed Swiss chard leaves on top of cooked tomato mixture. Make 8 small depressions with a spoon"
            },
            {
                "description": "Crack one egg into each depression. Cover (a transparent lid is ideal)"
            },
            {
                "description": "Cook until egg white is _just_ set. Serve immediately, in the pan."
            }
        ],
        "notes": "The resulting purée should stand up on its own only slightly slumping when piled high. If the puree is too thick (unlikely), you can thin it with some of the drained liquid. If it's too runny allow it to drain further.",
        "source": "[Fresh Pumpkin Puree (for Pumpkin Pie Filling)](https://recipeland.com/recipe/v/fresh-pumpkin-puree-for-pumpkin-57531)",
        "image": "https://recipeland.com/images/r/22001/e5e9854cbfecece089f6_550.jpg"
    },
]

I made the static interface for result page and cooking step page with html&css already

            <div class="colm">
            <img src="image/leftdish.jpg">
            <h5 class="dishNameh5">Dish Name</h5>
            <ul class="ingSummary">
                 <li class="w3-large"><i class="material-icons w3-large">nature</i>
                    <span class="ingContent">beef, spanish, salt, oil, soy sauce, beef, spanish, salt, oil, soy sauce</span>
                 </li>
                <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                    <span class="ingContent">30 minutes</span>
                 </li>
            </ul>
        </div>
        <div class="colm">
            <img src="image/middish.jpg">
            <h5 class="dishNameh5">Dish Name</h5>
            <ul class="ingSummary">
                <li class="w3-large"><i class="material-icons w3-large">nature</i>
                    <span class="ingContent">beef, spanish, salt, oil, soy sauce, beef, spanish, salt, oil, soy sauce</span>
                </li>
                <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                    <span class="ingContent">30 minutes</span>
                </li>
            </ul>
        </div>
        <div class="colm">
            <img src="image/rdish.jpg">
            <h5 class="dishNameh5">Dish Name</h5>
            <ul class="ingSummary">
                <li class="w3-large"><i class="material-icons w3-large">nature</i>
                    <span class="ingContent">beef, spanish, salt, oil, soy sauce, beef, spanish, salt, oil, soy sauce</span>
                </li>
                <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                    <span class="ingContent">30 minutes</span>
                </li>
            </ul>
        </div>

 <section id="ingOverview">
    <div class="ov3070container">
        <div class="ovLeft">
        </div>
        <div class=ovRight>
            <h3>DISH NAME</h3>
            <div class="ovRight-left">
                    <ul class="SingleIngSummary">                                
                            <h4>Main Ingredients</h4>
                            <li class="w3-large"><i class="material-icons w3-large">nature</i>
                            <span class="dishName">Salmon, green onion</span>
                            </li>
                            <h4>Secondery Ingredients</h4>
                            <li class="w3-large"><i class="material-icons w3-large">nature</i>
                                <span class="dishName">Salt, oil, soy sauce, or any seasoning of you choice</span>
                            </li>
                    </ul>                    
            </div>
            <div class="ovRight-right">
                    <ul class="SingleIngSummary">
                            <h4>Difficulity</h4>
                            <li class="w3-large"><i class="material-icons w3-large">bubble_chart</i>
                            <img src="image/rating.png" height="22px" width="126px">
                            <span class="smText">Elemantary</span>
                            </li>
                            <h4>Cooking Time</h4>
                            <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                            <img src="image/rating.png" height="22px" width="126px">   
                            <span class="smText">10 Minutes</span>
                            </li>
                    </ul>
            </div> 
        </div>  
        </div>
    </div>
</section>
<div class="divideLine"></div>
<section id="cookingSteps">
    <div class="Container1008">
        <p><span class="bgText">1.</span>&nbsp Preheat grill on high heat. After grill is heated, clean grate with grill brush. Reduce heat to medium high heat.</p>
        <img src="image/rawsalmon.jpg" alt="img">
        <div class="divideLine2"></div>

        <p><span class="bgText">2.</span>&nbsp Generously oil the grill grate by squirting some vegetable oil on a paper towel and using grill tongs, rub the oil on the grill grate.</p>
        <img src="image/onion.jpg" alt="img">
        <div class="divideLine2"></div>

        <p><span class="bgText">3.</span>&nbsp Season salmon fillets with salt and pepper. Place salmon diagonally on the grill grate. Grill salmon for 3-4 minutes per inch of thickness on each side with the lid closed.</p>
        <img src="image/grilled_salmon.jpg" alt="img">
    </div>  
</section>

Here is a screenshot of the result page

Screenshot of the cooking step page

I wonder how can I insert the data in my Json file to the DIVs I have in my html file? So the the actual "name", "ingredients", "step" etc. from the JSON will show up correctly?

Thank you for helping

Answer 1

What you'd have to do is write some JavaScript to iterate over the JSON object and then set the HTML/text of the respective HTML element.

So if you had an array like:

{name: "Pizza",ingredients:["tomatoes","cheese","dough"]}

Your JS would have to:

1. Loop through the JSON
2. Iterate over each object and grab the value(s)
3. Insert the text into its respective HTML div

How to append data to div using JavaScript?

How to iterate JSON array in JavaScript?

https://www.w3schools.com/js/js_json_arrays.asp

Answer 2

Assuming you want to create new HTML using the data in the JSON:

Take a chunk of the current HTML, copy it and remove all of the data. Then you can append a template literal with the new data to the page.

let recipe = {description: 'Super cool recipe'};
let newHTML = `<div>${recipe.description}</div>`;

After that you just need to find where in the page you want to stick it, and put it there. You can use insertAdjacentHTML, or if you're using jQuery you can use $(someElement).after(newHTML)

Answer 3

alright assuming your incoming JSON comes from something like:

.done(function( data ) {} ... , "json");

you can then label your spans (to be filled) like:

<span id="dishSpanID" class="ingContent">beef, spanish, ... , soy sauce</span>

then you can insert into those spans something like:

  .done(function( data ) {
    $("#dishSpanID").html(data[0].name);
  }

this is only an example and you need to do it for each element on the page.

Answer 4

This is an example for do what you want.

You have your JSON object, then you have to map the JSON and create your html structure for append to the template container.

var data = [
 {
   name : "Fred",
   last : "Durst"
 },
 {
   name : "Jonathan",
   last : "Davis"
 },
 {
   name : "Corey",
   last : "Taylor"
 }

]

var htmlStructure="";

data.forEach(function(element){
    htmlStructure +=    "<li>"+ element.name + ' ' + element.last + "</li>"
});

$('#container').append(htmlStructure)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="container">
  
  </ul>
</div>