Динамическое изменение содержимого страницы JSON

Я работаю над веб-сайтом, и я ищу, чтобы страницы рецептов были динамичными. Я создал тестовую базу данных JSON, создал JS-файл, который извлекает значения из файла JSON и отображает их в соответствующих div на странице.

То, что я хочу сделать, - это выбрать уважительный JSON для каждого рецепта и отобразить его на той же странице, когда пользователь нажимает ссылку на боковой панели, не создавая тонну пустых страниц HTML с теми же div.

Ниже мой код. Надеюсь, кто-то поможет мне помочь!

(function() {

'use strict';

 var url = 'my json url';

 $.getJSON(url, function(json) {

     //store json data into variable 
     var data = (json);

     //store data in empty string
     var title = '';
     var image = '';
     var directions = '';
     var prep = '';
     var cook = '';
     var serve = '';

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

     //append results to div
     $('#recipeTitle').html(title);
     $('#recipeImage').html(image);
     $('#recipeDirections').html(directions);
     $('#recipePrep').html(prep);
     $('#recipeCook').html(cook);
     $('#recipeServes').html(serve);

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

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

 });

}) ();

new code` (function () {function callback (json) {

 //store json data into variable 
 var data = (json);

 //store data in empty string
 var title = '';
 var image = '';
 var directions = '';
 var prep = '';
 var cook = '';
 var serve = '';

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

     //append results to div
     $('#recipeTitle').html(title);
     $('#recipeImage').html(image);
     $('#recipeDirections').html(directions);
     $('#recipePrep').html(prep);
     $('#recipeCook').html(cook);
     $('#recipeServes').html(serve);

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


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

$('#pasta').click(function(){
  $('#recipeIngredients').empty();
  //get the url from click coresponding to the item
  $.getJSON(url,callback);
});

//intially load the recipies with the URL 
var url = '';
$.getJSON(url,callback);

}) (); `

javascript,jquery,html,json,

0

Ответов: 1

0

для обеспечения повторного использования кода попробуйте вызвать $ .getJSON () с помощью функции повторного использования (обратного вызова) при щелчке ссылки на боковой панели

(function() {
     function callback(json){

     //store json data into variable 
     var data = (json);

     //store data in empty string
     var title = '';
     var image = '';
     var directions = '';
     var prep = '';
     var cook = '';
     var serve = '';
    ....     //rest of the code
    ...
     $.each(data[0][0].ingredients, function(i, item) {
         ul.append($(document.createElement('li')).text(item));
     });
    }

    $('.sidebarLink').click(function(){
      $('#recipeIngredients').empty()
      //get the url from click coresponding to the item
      $.getJSON(url,callback);
    });

    //intially load the recipies with the URL 
    var url = 'my json url';
    $.getJSON(url,callback);

})();
JavaScript, JQuery, HTML, JSON,
Похожие вопросы
Яндекс.Метрика