https://github.com/markmead/alpinejs-fetch
Alpine JS magic methods wrapper for fetch API methods 📨
https://github.com/markmead/alpinejs-fetch
alpinejs alpinejs-plugin fetch fetch-api
Last synced: 9 months ago
JSON representation
Alpine JS magic methods wrapper for fetch API methods 📨
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-fetch
- Owner: markmead
- License: mit
- Created: 2024-10-24T22:10:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-31T14:38:21.000Z (over 1 year ago)
- Last Synced: 2024-11-16T04:45:43.043Z (over 1 year ago)
- Topics: alpinejs, alpinejs-plugin, fetch, fetch-api
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Fetch
Alpine JS magic methods wrapper for fetch API methods 📨
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-fetch
npm install -D alpinejs-fetch
```
```js
import Alpine from 'alpinejs'
import api from 'alpinejs-fetch'
Alpine.plugin(api)
Alpine.start()
```
## Example
### GET
```html
Get
```
### POST
```html
Create
```
### PUT/PATCH
```html
Update
```
### DELETE
```html
Delete
```
## Filtering the Response
A lot of the times you only need a property from the response object, this is
usually `data`. You'll see/write stuff like this:
_Please note, this depends on the API response and not all APIs will share the
same response format._
```js
const { data } = fetch('https://dummyjson.com/products/1')
```
With this package you can do that by adding `[data]` to the end of the URL.
```html
Get
Get
```
This works for all the requests and isn't limited to the `data` property.
Anything that is part of the response object can be used to filter the response.
For example, `[status]`.
_Heads up! Syntax is important, the filter property key must be place in square
brackets `[x]`._
### Nested Filters
Sometimes you don't want the whole object back, in this example `data` returns a
lot of information but we only want `title` and `price` back. Here's how you can
do that.
```html
Get
```
This will return with the first key, in this case `data` omitted.
```json
{
"title": "iPhone 9",
"price": 549
}
```
_Note! You can still pass other filters in when using nested filters, something
like `[data.title, status]` will work fine!_
## Stats
