<script context="module">
import GhostContentAPI from '@tryghost/content-api';
// const api = 'http://localhost/posts';
const api = new GhostContentAPI({
url: 'http://localhost',
key: '95a0aadda51e5d621abd2ee326',
version: "v3"
});
export async function preload({ params, query }) {
try {
const response = await api.posts.browse({ limit: 5, fields: 'title, slug' });
return {
posts: response
}
} catch(err) {
console.log('Error');
}
}
</script>
<script>
export let posts;
</script>
<svelte:head>
<title>Blog</title>
</svelte:head>
<h1>Recent posts</h1>
<ul>
{#each posts as post}
<li>
<a rel='prefetch' href='blog/{post.slug}'>{post.title}</a>
</li>
{/each}
</ul>
Я использую vanilla JavaScript и Svelte, чтобы просто получить список сообщений в блоге, которые являются объектами из Ghost Blog Rest API. Функция Ghost API работает нормально и извлекает правильные объекты, но проблема начинается при попытке использовать блок Svelte {#each} для отображения каждого объекта, потому что их нет в массиве, и я не могу понять, как это исправить. Вот точное сообщение об ошибке в консоли:
Error: {#each} only iterates over array-like objects.
Запись console.log(response) после объявления const response выводит прикрепленное изображение, но только если я закомментирую {#each} сначала блок.
Я предполагаю, что мне просто нужно переместить 5 объектов в массив, но я также не понимаю, почему console.log выше работает только тогда, когда HTML закомментирован.
