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

**URL:** https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429
**Category:** General
**Created:** [25 August 2024 14:32 UTC](https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429 "2024-08-25T14:32:01Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![DhamodharanGopal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dhamodharangopal/32/95512_2.png) [@DhamodharanGopal](https://discourse.nodered.org/u/DhamodharanGopal)
#### Post date: [25 August 2024 14:32 UTC](https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429/1 "2024-08-25T14:32:01Z")

</div>

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:

```auto
[{ "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!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [25 August 2024 15:01 UTC](https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429/2 "2024-08-25T15:01:12Z")

</div>

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

Where are your web pages served from (and how)

---

<div class="post-metadata">

### Author: ![DhamodharanGopal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dhamodharangopal/32/95512_2.png) [@DhamodharanGopal](https://discourse.nodered.org/u/DhamodharanGopal)
#### Post date: [25 August 2024 15:50 UTC](https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429/3 "2024-08-25T15:50:47Z")

</div>

Yes absolutely I'm using Dashboard 2.0

Below attached the code

**HTTP Request**  
get/[http://localhost:1880/serverlocation](http://localhost:1880/serverlocation)

**Function Node**

```auto

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

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

msg.payload = locations;
return msg;

```

UI-Template Node

```auto

<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>

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [25 August 2024 15:58 UTC](https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429/4 "2024-08-25T15:58:05Z")

</div>

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`

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [23 November 2024 15:58 UTC](https://discourse.nodered.org/t/dynamic-autocomplete-dropdown-in-vue-js-with-node-red-fetching-location-data-from-endpoint/90429/5 "2024-11-23T15:58:19Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.