Dynamic Autocomplete Dropdown in Vue.js with Node-RED: Fetching Location Data from Endpoint

[DhamodharanGopal]

Hello,

• I am working on integrating a dynamic autocomplete dropdown in a Vue.js component using Vuetify. The dropdown should fetch server locations from a Node-RED endpoint and populate its options based on this data.

• Here is the JSON data returned from my Node-RED endpoint:

[  {    "location": "New York City, USA",    "lat": 40.73061,    "lon": -73.935242,    "capacity": "750 TB",    "status": "Operational",    "lastMaintenance": "2024-06-30T09:00:00Z",    "uptime": "99.98%",    "securityLevel": "High",    "powerUsage": "600 kW",    "icon": "server"  },  {    "location": "Paris, France",    "lat": 48.856613,    "lon": 2.352222,    "capacity": "800 TB",    "status": "Operational",    "lastMaintenance": "2024-07-01T12:00:00Z",    "uptime": "99.97%",    "securityLevel": "High",    "powerUsage": "700 kW",    "icon": "server"  },  {    "location": "Tokyo, Japan",    "lat": 35.689487,    "lon": 139.691711,    "capacity": "650 TB",    "status": "Maintenance",    "lastMaintenance": "2024-07-05T14:30:00Z",    "uptime": "99.96%",    "securityLevel": "Medium",    "powerUsage": "550 kW",    "icon": "server"  }]

• I need to populate a v-autocomplete component with the location values from this data. Here's a brief overview of what I am trying to achieve:

1. Fetch the location data from the endpoint (http://localhost:1880/serverlocation).
2. Extract the location values from the JSON response.
3. Populate these values in the v-autocomplete dropdown dynamically.

• Could anyone provide guidance or examples on how to accomplish this? I am used created and mounted hooks but it throws error and then how to use it to populate the v-autocomplete component.

• Thank you in advance for your help!

[Steve-Mcl]

Are you using @flowfuse/node-red-dashboard (AKA dashboard 2.0?)

Where are your web pages served from (and how)

[DhamodharanGopal]

Yes absolutely I'm using Dashboard 2.0

Below attached the code

HTTP Request
get/http://localhost:1880/serverlocation

Function Node

let locations = [];
let jsonData = msg.payload;

jsonData.forEach(function(item) {
    locations.push(item.location);
});

msg.payload = locations;
return msg;

UI-Template Node

<template>
  <v-autocomplete
    v-model="selectedLocation"
    :items="locations"
    label="Select Location"
    clearable
  ></v-autocomplete>
</template>

<script>
export default {
  props: ['locations'], // Accept locations as a prop
  data() {
    return {
      selectedLocation: ''
    };
  }
}
</script>

[Steve-Mcl]

In which case you don't need to serve the completions via an endpoint.

• Lose the props
• pass the array in via something like msg.completions
• bind items to msg.completions