如何在Svelte中展示API查询结果？名人生日提取失败求助

首先明确api-ninjas名人接口的返回结构：查询麦当娜时，接口返回的是单个名人对象组成的数组，控制台打印的data结构大致如下：

[
  {
    "name": "Madonna",
    "birthday": "August 16, 1958",
    // 其他关联字段
  }
]

你的问题集中在数据提取和展示的细节错误上，以下是修正方案：

1. 修正数据处理逻辑（Script部分） #

<script>
    let count = 0
    function buttonadder(){count += 1;}

    import { onMount } from 'svelte';
    let celebrity; // 改用语义化变量名，存储单个名人对象
    onMount(async () => {
        const response = await fetch(
            'https://api.api-ninjas.com/v1/celebrity?name=madonna',
            {
                method: 'GET',
                headers: {
                    'X-Api-Key': 'apikeygoeshere',
                },
            }
        );
        const data = await response.json();
        console.log(data);
        // 先判断数组是否有数据，避免空数组报错
        if (data.length > 0) {
            celebrity = data[0]; // 取数组第一个元素（匹配的名人）
        }
    });
</script>

2. 修正模板展示逻辑 #

<div>
    {#if celebrity}
        <p>The celebrity's birthday is {celebrity.birthday}</p>
    {:else}
        <p>loading.....</p>
    {/if}
</div>

关键错误说明 #

• 之前错误使用data.results：接口返回直接是数组，不存在results属性
• 语法错误：data.[0].birthday多了一个点，正确写法是data[0].birthday
• 模板直接输出对象：原代码中{footprint}会打印[object Object]，必须明确访问birthday字段

其余代码（标题、按钮、样式）可保留原样，不影响功能。

内容的提问来源于stack exchange，提问作者Gargan