javascript - How to return `html` response from Astro component as code inside head or body tag - Stack Overflow

admin管理员组

文章数量:1302407

In an Astro component MyScript.astro with a fetch call i am requesting the html from the response. It's returning e.g. <script async src="https://my-api"></script>.

    // MyScript.astro
    ---
    const { prop1, prop2 } = Astro.props;
    
    const response = await fetch(import.meta.env.API_URL, {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'My-Key': import.meta.env.API_KEY,
      }),
      body: JSON.stringify({
        prop1,
        prop2
    
      }),
    });

const { html } = await response.json();
---

How do I return / output html in the body of the page as code?

Update:

I use now:

<Fragment set:html={html} />

That seems to work.

In an Astro component MyScript.astro with a fetch call i am requesting the html from the response. It's returning e.g. <script async src="https://my-api"></script>.

    // MyScript.astro
    ---
    const { prop1, prop2 } = Astro.props;
    
    const response = await fetch(import.meta.env.API_URL, {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'My-Key': import.meta.env.API_KEY,
      }),
      body: JSON.stringify({
        prop1,
        prop2
    
      }),
    });

const { html } = await response.json();
---

How do I return / output html in the body of the page as code?

Update:

I use now:

<Fragment set:html={html} />

That seems to work.

• javascript
• html
• json
• astrojs
• stringify

Share Improve this question Follow edited Feb 10 at 17:09 meez asked Feb 10 at 15:02 meezmeez 4,7981010 gold badges5555 silver badges123123 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -2

You can use set:html:

// MyScript.astro
---
const data = await fetch(url).then(res => res.json())
---

<Fragment set:html={data.html} />

本文标签： javascriptHow to return html response from Astro component as code inside head or body tagStack Overflow