使用 Svelte 和 Strapi v4 显示对象的属性

Question

我正在为一个项目使用 Strapi v4 和 Svelte（我在开发方面也很新，抱歉，但我的问题可能很基础）。我从我的本地主机获取我的 Strapi 数据并将它们放入控制台日志，没问题。使用 GraphQL，我得到如下数据，例如：

"produits": {
  "data": [
    {
      "id": "1",
      "attributes": {
        "reference": "MEV620001"
      }
    }

我的问题是在使用 Svelte 渲染它们时，我只能获取 ID 而不知道如何显示每个产品的属性。使用 Strapi v3，我可以，但我现在不能更改数据在 Strapi v4 中的显示方式。我在 Svelte 中的代码是：

<script>
  import { onMount } from "svelte";

  let produits = [];

  onMount(async () => {
    const response = await fetch("http://localhost:1337/api/produits");
    produits = await response.json();
    console.log(produits);
  });
</script>

{#if produits.data}
  {#each produits.data as produit}
    <h3>{produit.id}{produit.reference}</h3>
    ///how to enter into the attributes with Strapi v4 ?///
    <hr />
  {:else}
    <p>Chargement...</p>
  {/each}
{/if}

通过上面的代码，我在前端得到了未定义的“reference”，这是因为“reference”在这个特定id的属性里面，我不知道怎么进去属性来呈现它们。非常感谢您的大力帮助。

Answer 1

您需要访问 attributes 然后 reference 这可以在您的代码中使用 produit.attributes.reference

完成

<script>
  import { onMount } from "svelte";

  let produits = [];

  onMount(async () => {
    const response = await fetch("http://localhost:1337/api/produits");
    produits = await response.json();
    console.log(produits);
  });
</script>

{#if produits.data}
  {#each produits.data as produit}
    <h3>{produit.id}{produit.attributes.reference}</h3> <!-- modified this line -->
    ///how to enter into the attributes with Strapi v4 ?///
    <hr />
  {:else}
    <p>Chargement...</p>
  {/each}
{/if}

使用 Svelte 和 Strapi v4 显示对象的属性

Showing attributes of an object with Svelte and Strapi v4

api

graphql

strapi

svelte