For Loop API迭代HTML生成错误

Question

通过api调用进行的循环迭代未正确格式化函数和json字符串的对象。

尝试使用变量和类重命名以解构对象，但没有成功。

            function search() {
                let html = $('#searchBtn').html();
                $('#searchBtn').html('<span></span>');
                $('span').addClass('spinner-border spinner-border-sm');
                $('#recipes').html('');
                let query = $('#searchBar').val();
                $.ajax({
                    method: "GET",
                    url: `${url}${query}${appId}${apiKey}`,
                    success: function (data) {
                        $('span').removeClass('spinner-border spinner-border-sm');
                        $('#searchBtn').html(html);
                        let recipes = data.hits;
                        for (let i = 0; i < recipes.length; i++) {

                            document.getElementById('recipes').innerHTML += `<div class='col-sm-8 m-sm-3 p-sm-5 shadow-lg text-center justify-content-center'><h1>${recipes[i].recipe.label}</h1>
                            <img src='${recipes[i].recipe.image}'><br><button class='btn btn-primary m-sm-2'><a href="${recipes[i].recipe.url}" class='text-white text-decoration-none'>Recipe</a></button>
                            <button type='button' class='btn btn-primary' onclick="bookMark(${recipes[i].recipe.url})">Bookmark</button><div class='row justify-content-around ml-sm-3'><div class='col-sm-5 text-left justify-content-center'>
                            <h4>Ingredients</h4><ul>${recipes[i].recipe.ingredientLines.map((currentVal) => '<li>' + currentVal + '</li>').join("")}</ul></div>
                            <div class='col-sm-5 text-left'><h4>Health Information</h4><ul>${recipes[i].recipe.healthLabels.map((currentVal) => '<li>' + currentVal + '</li>').join("")}</ul></div></div></div>`;
                        }
                    },
                    error: function (errorThrown) {
                        console.log(errorThrown);
                    }
                });
            }

            function bookMark(item) {
                if (session.get('status') === true || local.get('status') === true) {
                    bookmarks.push(item);
                    session.set('bookmarks', bookmarks.collection);
                    local.set('bookmarks', bookmarks.collection);
                    console.log(item);
                }
            }

我在当前设置中遇到语法错误，而我遇到的具体问题是bookMark函数调用