Extend alpine-ajax for JSON APIs?

[fchtngr]

Hey! 👋

I've been using alpine-ajax for HTML responses and it's great! I recently built a custom directive focused specifically on JSON API requests and thought it might be interesting to share.

The idea: While alpine-ajax handles HTML responses beautifully, many apps also need to work with JSON APIs. My plugin (x-req) provides a declarative way to handle JSON requests with similar Alpine-friendly syntax. Fetch data from an API and use alpine to render it (e.g. s-show, x-if, x-for etc.)

Example:

<div x-data="{ 
  loading: false, 
  post: null 
}">
  <button x-req="/api/posts/1"
          @x-req:before="loading = true"
          @x-req:after="loading = false"
          @x-req:ok="post = $event.detail"
          @x-req:err="console.error($event.detail.error)"
          :disabled="loading">
    <span x-show="!loading">Load Post</span>
    <span x-show="loading">Loading...</span>
  </button>
  
  <div x-show="post">
    <h3 x-text="post?.title"></h3>
    <p x-text="post?.body"></p>
  </div>
</div>

Would this be interesting as part of the alpine-ajax ecosystem? The plugin would then be able to handle both HTML and JSON responses. Or is it out of scope for alpine-ajax and I just continue developing it as a separate alpine plugin?

Repo if you want to take a look: https://github.com/fchtngr/alpine-req

Anyway, would love to hear your thoughts!

[imacrayon]

Cool! I’ve been considering exposing more of the Alpine AJAX internal API so even if this solution isn’t absorbed into Alpine AJAX maybe it can all run on the same underlying code

[vital789]

Christian, please improve your Ajax plugin for support JSON response: {"newsName": "Some", "n_img": "<img...>", "n_body": ...} with replacing content containers of each some id elements on a page like "<main x-merge="json"><div x-json='newsName'>" or "<div x-json id='newsName'> ... </main>" (if exists 'id' - shortened x-json) - mapped to JSON keys!!!
Also need get JSON data (got_json_data_vars) only for activate <template x-for="(value, index) in got_json_data_vars" to formed html snippet after Ajax response!

[th-km]

Hi there! I'm really curious about the current status of JSON support. I think this could be a great addition. For example, I'm using Shopify with Alpine Ajax, and it works perfectly! But Shopify provides two specific APIs: the section rendering API and the bundled section rendering, both of which return JSON instead of HTML. This method allows you to fetch only the necessary section instead of the entire page. The alpine-req package looks interesting, but when it comes to a Shopify project, it's often necessary to use multiple APIs - Shopify-specific and external ones for newsletter, reviews, bundle...) and having an API like x-target.json would cover a lot of use cases without recreating something like Alpine Ajax from scratch.