API 在 DOM 中使用 Svelte 返回对象的请求

Question

我很难理解为什么我的循环显示这个：

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

我用 fetch 和 axios 尝试了很多东西，但结果都是一样的

这是我的 Svelte 组件：

<script>
  import axios from 'axios';

  let results = [];

 const fetchYoutubeList = async () => {
    const searchQuery = 'mySearch';
    const maxResults = 10;
    const apiKey = import.meta.env.VITE_APP_YOUTUBE_API_KEY;
    const apiBaseUrl = import.meta.env.VITE_APP_API_BASE_URL;

    await axios.get(`${apiBaseUrl}`, {
      params: {
        part: 'snippet',
        maxResults: maxResults,
        q: searchQuery,
        type: 'video',
        key: apiKey
      }
    })
      .then(response => {
        console.log(response.data);
        results = response.data.items;
        console.log(results);
        console.log(typeof results);
      });
  };
</script>

<section>
  <button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2"
    on:click|once={fetchYoutubeList}
  >
    Bring me joy
  </button>

  <div>
    <ul>
      {#each results as item }
        <li>
          {item.id}
        </li>
      {/each}
    </ul>
  </div>
</section>

这是我的日志结果：

我想我错过了一些东西，但我找不到什么，所以如果你们中的一些人有想法，如果你能调试我我会很高兴

谢谢

Answer 1

[更新]- 解决方案

感谢@pilchard，我在这里发现了我的错误。

我试图循环遍历一个对象，因为我的 item.id 是一个对象（顺便说一句很奇怪 ^^），所以一切正常，我设法正常循环。

API 在 DOM 中使用 Svelte 返回对象的请求

API request with Svelte returning object in DOM

javascript

api

loops

svelte

svelte-3