API Post Request returns data in Postman, but browser gets an empty string (Alpine JS + PHP)

Question

I have built a basic CMS with a field that has HTML in it and a div next to it to preview the contents. When you type in the field, I have Alpine set up to ask the server to render the updated HTML back to the preview.

My API endpoint (Laravel) returns a JSON array {"html":{encoded_payload}}

I can see the Request Payload in the Network tab of Developer Tools and Postman shows the correct data being returned. {"html":"<faq ... price.<\/p>"}

The important part: The browser gets this: {"html":""}

I don't understand why the value is empty in the browser but not in Postman.

I used this tutorial: https://github.com/simonswiss/egghead-alpine-js/blob/master/src/_includes/lessons/8.html

Javascript Function

function updatePreview()
{
   return {
      section_content: {!! json_encode($field->value) !!},
      section_content_preview: '{!! $preview !!}',
      fetchStatus: 'loading',
      data: null,
         init() {
            this.$watch('section_content', () => {
               this.fetchHTML();
            });
            this.fetchHTML();
      },
      async fetchHTML() {
         this.fetchStatus = 'loading';
         await fetch(
            "{{ env('APP_URL') }}/api/parse/review/{{ $wineclubreview->id }}/html",
            {
               method:"POST",
               headers: {
                  'Content-Type': 'application/json'
               },
               body:JSON.stringify(section_content.value)
            }
      )
         .then(res => {
            if (!res.ok) {
               this.fetchStatus = 'error'
            }
            return res.json()
         })
         .then(data => {
            this.fetchStatus = 'idle'
            this.data = data
         })
         .catch(error => {
            this.fetchStatus = 'error'
               console.log({error})
            })
          }
     }
}

Form is wrapped in this div

<div x-init="init" x-data="updatePreview()"></div>

The relevant parts of the form

<textarea id="section_content" name="section_content" 
    x-model.debounce.750="section_content">pre-populated value</textarea>

<!-- API error -->
<template x-if="fetchStatus === 'error'">
   <p class="error">There was something wrong with the API call, please try again.</p>
</template>

<!-- Fetching html -->
<div x-show="fetchStatus === 'loading'" class="spinner"></div>

<template x-if="section_content && fetchStatus === 'idle'">
   <div>
   <!-- Failed search -->
   <template x-if="data.status === 'error'">
      <p class="error" x-text="data.message"></p>
   </template>

    <!-- Preview -->
    <template x-if="data.status === 'success'">
       <div id="section_content_preview" x-model="html.section_content_preview">

       </div>
    </template>
    </div>
</template>

Answer 1

I have figured out why it works in Postman... I had configured it with the field data to send in the body. It wasn't retrieving it dynamically the way the browser does.

It's still not working, but that's another Question.