Need a proper example of Lists in Custom API

[dev-inside]

Description

Hey,
first of all, I am a big fan of Homepage, it is pretty great! Now to my issue (or maybe misunderstanding).

I would love to show the list of the data field from the following response:

{
  "data": [
    {
      "id": 0,
      "url": "https://www.domain.com/",
      "target": "https://www.domain.com/",
      "title": "Example",
      "description": "",
      "lastmodified": 1720770796,
      "added": 1720769859,
      "clickcount": 1,
      "lastPreview": 0,
      "available": true,
      "archivedFile": null,
      "userId": "Me",
      "tags": [
        
      ],
      "folders": [
        -1
      ],
      "textContent": null,
      "htmlContent": null
    },
    {
      "id": 1,
      "url": "https://www.another-example.de/",
      "target": "https://www.another-example.de/",
      "title": "slashCAM",
      "description": "",
      "lastmodified": 1720770011,
      "added": 1720770011,
      "clickcount": 0,
      "lastPreview": 0,
      "available": true,
      "archivedFile": null,
      "userId": "Me",
      "tags": [
        
      ],
      "folders": [
        -1
      ],
      "textContent": null,
      "htmlContent": null
    }
  ],
  "status": "success"
}

Whatever I do, I doesn't show any result in Homepage. I tried display list, I tried to add data as a field etc. The response is a simple GET response with Queries, no Headers, no tokens - it works even in the browser.

Does HP not loop over list elements? If so, then please add that feature.

Can someone provide me with an example how to display a list similar to my example? Thank you!

homepage version

0.9.3

Installation method

Docker

Configuration

No response

Container Logs

No response

Browser Logs

No response

Troubleshooting

Tried it according to the documentation, which is unfortunately thin on this topic.

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

To display a list of data from an API response in Homepage, you need to ensure that the widget you are using is configured to handle the data structure returned by the API. Based on the response you've provided, it seems like you want to loop over an array of objects and display certain properties like title, url, and description.

Here's a general example of how you might configure a widget to display a list of items from an API response:

widget:
  type: custom_service # Replace with the actual type of service widget you are using
  url: http://your.api/endpoint # The endpoint that returns the JSON response
  fields: ["data"] # Specify the top-level field in the JSON response that contains the array
  mapping:
    title: "title" # Map the 'title' property in the response to the 'title' field in the widget
    url: "url" # Map the 'url' property in the response to the 'url' field in the widget
    description: "description" # Map the 'description' property in the response to the 'description' field in the widget

Please note that the actual configuration may vary depending on the specific widget you are using and the structure of the API response. If Homepage does not currently support looping over list elements in the way you require, this would be a feature request that you could submit to the Homepage development team through their GitHub issues page.

Since you mentioned that the documentation is thin on this topic, it might be helpful to look at the source code of the widgets (as mentioned in the documentation) to understand how they process and display data. If you are not able to achieve the desired result with the existing widgets, you may need to create a custom widget or modify an existing one to handle your specific use case.

If you provide the exact type of widget you are trying to configure, I can give you a more precise example. Otherwise, if Homepage does not currently support this feature, I recommend reaching out to the developers by creating an issue on the Homepage GitHub repository to request this functionality or to ask for further assistance.

This comment was generated by Glime.

[allaboutduncan]

Figured it out. Hope this helps @dev-inside if you're still needing an answer

My JSON

{
    "items": [
        {
            "id": "i--jYalrOE0X",
            "type": "row",
            "name": "1188",
            "index": 0,
            "createdAt": "2024-10-16T12:47:19.051Z",
            "updatedAt": "2024-10-16T12:47:19.051Z",
            "values": {
                "Total Books": 1188,
                "Books Read": 44,
                "BooksYear": 167,
                "BooksAdded30": 8
            }
        }
    ],
    "nextSyncToken": "XJ0QXQiOjE3MjkwODI4MzkuMDUxLCJ1c2VDb2x1bW5OYW1lcyI6dHJ1ZX0"
}

and my yaml

    - Library Stats:
        icon: https://cdn-icons-png.flaticon.com/128/3145/3145765.png
        widget:
            type: customapi
            url: https://coda.io/apis/
            refreshInterval: 60000 # optional - in milliseconds, defaults to 10s
            method: GET 
            headers:
                Authorization: TOKEN GOES HERE
            mappings:
                - field:
                    items: 
                        0:
                            values: Total Books
                  label: Total Books
                - field:
                    items: 
                        0:
                            values: Books Read
                  label: Books Read
                - field:
                    items: 
                        0:
                            values: BooksAdded30
                  label: Books Added < 30
                - field:
                    items: 
                        0:
                            values: BooksYear
                  label: Books Added This Year

Outputs this on homepage

[dev-inside]

That's pretty helpful, thank you! Do you know, if there is a chance to set clickable URLs on those items? Would be actually pretty great :)

[allaboutduncan]

I don't see anything in the docs about supporting links. You can on the main container/icon but that's it

[allaboutduncan]

Yeah, I think you'd have to manually specify the record you wanted (0,1,2,3,etc). I don't see a way to programmatically iterate on an array

[dev-inside]

After trying around with it, I came to the conclusion, that the Custom API is only useful for simple things like this. I would love to render a list with iteration and as far as I can see, there is no option for that.

Also there is no widget for it. I would love to sync my bookmarks and would love to it automatically....

[Kur0x]

Hi,
I am using CustomAPI to get bandwidth of my Openwrt router by NetData api. But I don't know how to get a number inside a list. Can someone tell me how to write the correct yaml. Thanks!

here is the data from NetData:

{
 "labels": ["time", "received", "sent"],
    "data":
 [
      [ 1735434612, 184.1949, -22131.16]
  ]
}

here is my unfinished yaml:

        widget:
            type: customapi
            refreshInterval: 1000
            url: http://10.0.0.1:19999/api/v1/data?chart=net.br-lan&after=-1&points=1&group=average
            method: GET
            mappings:
                - field: data
                #   label: Download
                #   format: number
                #   suffix: MB/s
                #   compute: "/1048576"
                - field: data[0][2]
                    # label: Upload
                    # format: number
                    # suffix: MB/s
                    # compute: "/1048576"