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

can you show the ajax call that produces the JSON? either way, I would suggest using id on your spans and mapping incoming JSON object to them accordingly. some naming conventions may allow you to iterate it programmatically but, even brute force should suffice. — NappingRabbit
– NappingRabbit, Commented Jan 5, 2018 at 19:48
Are you using (or planning on using) any templating engines or front-end frameworks? Or are you doing this all in vanilla javascript, html & css? — Curt Husting
– Curt Husting, Commented Jan 5, 2018 at 19:48
For do that you have to iterate your JSON object and create the html structure in javascript — Jorge Mejia
– Jorge Mejia, Commented Jan 5, 2018 at 19:49
@JorgeMejia you can map the object's properties instead of iterating through it as well. — NappingRabbit
– NappingRabbit, Commented Jan 5, 2018 at 19:50

Zeratas · Accepted Answer · 2018-01-05 19:48:42Z

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:

Loop through the JSON
Iterate over each object and grab the value(s)
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

answered Jan 5, 2018 at 19:48

Zeratas

1,0253 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kukumalu Over a year ago

How to loop through the JSON? the js file and json file are separate.

Zeratas Over a year ago

Is it local or on another web server?

Bricky · Accepted Answer · 2018-01-05 19:51:01Z

1

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)

answered Jan 5, 2018 at 19:51

Bricky

2,28417 silver badges34 bronze badges

Comments

Jorge Mejia · Accepted Answer · 2018-01-05 20:11:50Z

0

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>

answered Jan 5, 2018 at 20:11

Jorge Mejia

1,1611 gold badge11 silver badges28 bronze badges

3 Comments

kukumalu Over a year ago

hmmm. I put $.getJSON("recipes.json", function() { //how can I loop through the JSON? }); the js file and json file are separate.

Jorge Mejia Over a year ago

Ok, you just have to recive the object in your function $.getJSON("recipes.json", function( jsonData ) { // Here you can loop through jsonData });

kukumalu Over a year ago

the console gave me fail to load error message: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery.min.js:4 ajax @ jquery.min.js:4 r.(anonymous function) @ jquery.min.js:4 getJSON @ jquery.min.js:4 (anonymous) @ main.js:4 j @ jquery.min.js:2 k @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 S @ jquery.min.js:3 😕

NappingRabbit · Accepted Answer · 2018-01-05 20:01:14Z

0

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.

answered Jan 5, 2018 at 20:01

NappingRabbit

1,9191 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related