Tom Tom - 1 month ago 5
Javascript Question

Want to change div dynamically when clicking link in sidebar with JSON data

I am working on a recipes page and I have code that currently grabs JSON data and displays it in respective div's on the page. I want to achieve code re usability and to be able to dynamically change contents based on the link in the sidebar and have it grab to the correct JSON data and update the divs on the page. Currently my data only takes one recipe from the JSON database and displays it on the page. I want to avoid making multiple pages and duplication the JS for each recipe.

Snippet is below:



(function() {

'use strict';

var url = '';

// $.getJSON(url, function(json) {

var json = [
[
{
"id":"1",
"category":"pasta",
"seasonal":"fall",
"recipeName":"Bolognese Sauce",
"prepTime":"20 Min",
"cookTime":"30 Min",
"servInfo":"4-6",
"directions":"lorem ipsum",
"ingredients":[
"1 lb Rigatoni",
"3 tbsp Extra Virgin Olive Oil, plus extra for drizzling",
"1 cup white onions, diced",
"¼ cup carrots, diced",
"¼ cup celery, diced",
"1 ½ lb. ground beef",
"¼ cup Tomato Paste in a Tube",
"1 1/2 cup All Purpose Beef Broth",
"½ cup heavy cream",
"1 Bay Leaf",
"1 can Certified San Marzano Tomatoes (28 oz), crushed by hand",
"1 can All Purpose Crushed Tomatoes (28 oz)",
"¼ cup fresh basil, chopped",
"Salt and Ground Black Pepper, to taste"
],
"imageURL":"path",
"href": "path"
}
],
[
{
"id":"2",
"category":"pizza",
"seasonal":"winter",
"recipeName":"Arugula Pizza",
"prepTime":"30 Min",
"cookTime":"10 Min",
"servInfo":"3-4",
"directions":"lorem ipsum",
"ingredients":[
"4 lb Rigatoni",
"3 tbsp Extra Virgin Olive Oil, plus extra for drizzling",
"1 cup white onions, diced",
"¼ cup carrots, diced",
"¼ cup celery, diced",
"1 ½ lb. ground beef",
"¼ cup Tomato Paste in a Tube",
"1 1/2 cup All Purpose Beef Broth",
"½ cup heavy cream",
"1 Bay Leaf",
"1 can Certified San Marzano Tomatoes (28 oz), crushed by hand",
"1 can All Purpose Crushed Tomatoes (28 oz)",
"¼ cup fresh basil, chopped",
"Salt and Ground Black Pepper, to taste"
],
"imageURL":"path",
"href": "path"
}
]
];

var title = '';
var image = '';
var directions = '';
var prep = '';
var cook = '';
var serve = '';

$.each(json[0], function(i, item) {
title += '<h1>' + item.recipeName + '</h1>';
image += '<img class="imgJSONheader" src="' + item.imageURL + '">';
directions += '<p>' + item.directions + '</p>';
prep += '<strong>' + item.prepTime + '</strong>';
cook += '<strong>' + item.cookTime + '</strong>';
serve += '<strong>' + item.servInfo + '</strong>';
});

$('#recipeTitle').html(title);
$('#recipeImagesHeader').html(image);
$('#recipeDirections').html(directions);
$('#recipePrep').html(prep);
$('#recipeCook').html(cook);
$('#recipeServes').html(serve);

var ul = $('<ul class="nav nav-stacked">').appendTo('#recipeIngredients');

$.each(json[0][0].ingredients, function(i, item) {
ul.append($(document.createElement('li')).text(item));
});

var images = '';

var collection = [];

$.each(json, function(i, item) {
if ($.inArray(item[0].category, collection) === -1) {
collection.push(item[0].category);
images += '<div class="col-md-6 col-sm-6">' + '<a href="' + (item[0].href) + '">' + '<img class="img img-responsive img-hover imgJSONCategory" src="' + (item[0].imageURL) + '">' + '</a>' + '<h1>' + (item[0].category) + '</h1>' + '</div>';
}
});

$('#imagesCategory').html(images);

// });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Test Header Start -->
<section>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div id="recipeImagesHeader"></div>
<div class="hero">
<hgroup>
<h1>Sauces</h1>
</hgroup>
</div>
</div>
</div>
</div>
</section>
<!-- Test Header End -->

<!-- Test Recipe Sidebar Container -->
<section>
<div class="container">
<div class="row">
<!-- Sidebar Start -->
<div class="col-md-3 visible-lg visible-md">
<ul class="nav nav-stacked" id="sidebar">
<li class="sidebarLink"><a href="">Seasonal</a>
</li>
<li><a href="#">Breakfast</a>
</li>
<li><a href="#">Pasta</a>
</li>
<li><a href="#">Sauces</a>
</li>
<li><a href="#">Appetizers</a>
</li>
</ul>
</div>
<!-- Main Section Start -->
<div class="col-md-9" id="mainCol">
<div class="row" id="mainHeader">
<!-- Title Start -->
<div class="col-md-5">
<div id="recipeTitle"></div>
</div>
<!-- Prep, Cook, Serves Start -->
<div class="col-md-7">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h4>Prep Time</h4><span id="recipePrep"></span>
</div>
<div class="col-md-4col-sm-4 col-xs-4">
<h4>Cook Time</h4><span id="recipeCook"></span>
</div>
<div class="col-md-4col-sm-4 col-xs-4">
<h4>Serves</h4><span id="recipeServes"></span>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Ingredients Start -->
<div class="col-md-5">
<h2>Ingredients</h2>
<div id="recipeIngredients"></div>
</div>
<!-- Directions Start -->
<div class="col-md-7">
<h2>Directions</h2>
<div id="recipeDirections"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /.row -->




Answer

Have you tried wrapping your initial loop in a loop.

 $.each(json, function(idx, json_item) { 
     $.each(json_item, function (i, item) {
         title += '<h1>' + item.recipeName + '</h1>';
         image += '<img class="imgJSONheader" src="' + item.imageURL + '">';
         directions += '<p>' + item.directions + '</p>';
         prep += '<strong>' + item.prepTime + '</strong>';
         cook += '<strong>' + item.cookTime + '</strong>';
         serve += '<strong>' + item.servInfo + '</strong>';
     });
)};

Link to codepen

Comments