Я не слишком знаком с HTML, но я пытаюсь создать интерактивную ссылку для каждого варианта рецепта, которая приведет пользователя к фактическому рецепту. У меня есть этот снимок экрана ниже.
Изображение параметров, которые увидит пользователь
На этом снимке экрана я хочу, чтобы пользователи могли нажимать на изображение или title (name), который затем перенаправит их на другую страницу с инструкциями по рецепту.
Я использую express для этого веб-приложения.
app.get('/recipes', (req, res) => {
if (!req.query.search)
{
res.send("Must provide a recipe name!")
}
else
{
getRecipeListByName(req.query.search, (error, recipeOptionsArr) => {
res.send(recipeOptionsArr)
})
}
})
recipeOptionsArr - это массив объектов:
recipeOptionsArr : [
{
title, // title is the name of the recipe (it is shown in the screenshot)
id, // id of the recipe... used for searching (won't need right now)
image // the image that is (it is shown in the screenshot)
}, {},{}... more objects with the same kind of data
]
Это код html, который я написал. Я не думаю, что вам понадобится весь код, но я решил добавить его, чтобы он был подробным. Я поместил важный код
<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
</head>
<body>
<p>Use this to find recipes!</p>
<form>
<input placeholder="Recipe">
<button>Search</button>
</form>
<!-----------------------This creates the list of options--------------------------->
<div id="recipes">
<!--This is empty, but will get the data from the recipes-template-->
</div>
<script id="recipes-template" type="text/html">
<ul>
{{#data}}
<li>{{title}}: </li>
<img src={{image}}>
{{/data}}
</ul>
</script>
<!-----------------------This creates the list of options--------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Наконец, это код, который записан в файл html:
const recipeForm = document.querySelector("form")
const search = document.querySelector("input")
const $recipes = document.querySelector("#recipes")
const recipesTemplate = document.querySelector("#recipes-template").innerHTML
recipeForm.addEventListener("submit", (event) => {
event.preventDefault()
const recipeName = search.value
fetch(`/recipes?search=${recipeName}`).then((response) => {
response.json().then((data) => {
console.log(data)
console.log(data[0].title)
const html = Mustache.render(recipesTemplate, {
data
})
$recipes.innerHTML = html
})
}).catch((error) => {
console.log("Sorry could not find recipe" + error)
})
})
Я не совсем уверен, что мне делать следующий. В этом первом фрагменте кода он отправляет список параметров. Затем я хочу разрешить пользователям выбирать желаемый вариант. Предположим, они выбрали второй вариант (индекс 1), затем я возьму этот идентификатор объекта и вызову функцию поиска для инструкций рецепта, которые я уже создал. Куда мне вставить эту функцию и как? Кроме того, как я могу позволить каждой опции иметь ссылку на рецепты? id), ему нужно будет отправить ответ (res.send ( переменная некоторых инструкций )). Проблема в том, что я не могу этого сделать, потому что функция уже отправила ответ. Я мог быть полностью неправ, но я об этом думал.
Подводя итог моему вопросу: как я могу связать каждый вариант рецепта с реальным рецептом и как отправить инструкции рецепта на веб-страницу, когда я уже использовал res.send ()?
Надеюсь, все это не слишком запутывает. Я очень ценю всю помощь. Большое вам спасибо.