Блог

Главная - Вопросы по программированию - Помощь в динамическом изменении содержимого страницы в формате JSON

Помощь в динамическом изменении содержимого страницы в формате JSON

#javascript #jquery #html #json

#javascript #jquery #HTML #json

Вопрос:

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

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

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

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

 });

})();

новый код`(функция() { обратный вызов функции (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);

})();`

Комментарии:

1. Все, что вы нам показали, — это некоторый код … но никаких заявлений о проблеме, упоминаний об ошибках или вопросов. Мы понятия не имеем, что работает, а что нет

2. в коде нет ничего плохого. я просто хочу узнать, как я могу динамически изменять содержимое страницы с помощью предоставленного мной кода. Я хочу создать единую страницу рецепта и изменить рецепт (скажем, с пасты на пиццу) на той же странице без необходимости создавать несколько HTML-страниц. У меня есть каждый рецепт в файле json, но я не уверен, как я могу показывать различное содержимое на основе рецепта, нажатого слева на боковой панели. Спасибо

3. итак, вам нужно, чтобы это вызывалось внутри обработчика событий click. Выбранный элемент определит, какой URL использовать или какие параметры передавать на сервер. Как хранятся эти рецепты?

4. у меня есть рецепты в файле json, настроенные следующим образом [ [ { «recipe» «recipe1» } ], [ { «recipe» «recipe2» } ] ] вот так примерно настроен мой json. ничего особенного, просто все содержимое для каждого рецепта разделено массивами. и затем все они заполняются на HTML-странице в каждом div

5. поэтому вам нужно будет загружать весь json при загрузке страницы и сохранять его. Затем отфильтруйте его на основе выбранного элемента

Ответ №1:

чтобы добиться возможности повторного использования кода, попробуйте вызвать $.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);

})();

Комментарии:

1. используйте $(‘#RecipeIngredients’).empty(), чтобы очистить текущие элементы списка рецептов по щелчку мыши перед добавлением

2. как я могу узнать, какой рецепт загружать, основываясь на щелчке боковой панели?

3. вы можете просмотреть мой текущий код вверху с вашим примером. просто не уверен, как я могу заставить его захватывать определенные данные на основе щелчка

Метки: