How to show data from Elasticsearch in Vue js? - javascript

I use elasticsearch as a database. How do I show the received data as a table in Vue js.
And maybe you know how to sort this data later?
response fragment from 'http://localhost:9200/customers/_doc/_search/?pretty=true':
"hits": {
"total": {
"value": 20,
"relation": "eq"
},
"max_score": 1.0,
"hits": [
{
"_index": "customers",
"_type": "_doc",
"_id": "LnvWpYUBVm1Vt4AqDz_K",
"_score": 1.0,
"_source": {
"customers_id": "1",
"customers_warning": "",
"customers_status": "0",
"customers_gender": "\"",
"customers_firstname": "John",
"customers_secondname": "\"",
"customers_lastname": "Move",
"customers_dob": "0000-00-00 00:00:00",
My Vue js component for showing data :
<template>
<v-data-table hide-actions flat :headers="headers" :items="customers" :items-per-page="10">
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ customers.id }}</td>
<td>{{ customers.firstname }}</td>
<td>{{ customers.email }}</td>
</tr>
</tbody>
</template>
<template v-slot:no-results>
<h6 class="grey--text">No data available</h6>
</template>
</v-data-table>
</template>
Script to takes data
import axios from 'axios'
export default {
data() {
return {
data: [],
query: "",
headers: [
{ text: "id", value: "customers.id" },
{ text: "name", value: "customers.firstname" },
{ text: "email", value: "customers.email" },
,
],
};
},
metods(query) {
axios.get('http://localhost:9200/customers/_doc/_search/?pretty=true',{
params:{
source: JSON.stringify(query),
source_content_type: 'application/json' ,
},
}).then(response => response.data.hits.hits);
},
}
</script>
how to write a query to the database and show it on the page

Related

How to show dropdown for fields which are of type array in vue-good-table

Is there a way in vue-good-table to show dropdown where-ever the data type is array?
Rows given below:
[
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
]
Columns given below:
[
{
label: "NAME",
field: "name",
},
{
label: "Platform Name",
field: "fqdn",
},
{
label: "System Custodian",
field: "SystemCustodianName",
},
{
label: "System Custodian ID",
field: "SystemCustodianId",
},
{
label: "Frequency",
field: "frequency",
}
]

you need to use the table-row slot.
Here is the code
<template>
<div id="app">
<vue-good-table :columns="columns" :rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'freqency'">
<span style="font-weight: bold; color: blue">
<select>
<option
v-for="(val, index) in props.formattedRow.freqency"
:value="val"
:key="props.column.field + ' ' + index"
>
{{ val }}
</option>
</select>
{{ props.row.age }}
</span>
</span>
<span v-else>
{{ props.formattedRow[props.column.field] }}
</span>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
columns: [
{
label: "NAME",
field: "name",
},
{
label: "Platform Name",
field: "fqdn",
},
{
label: "System Custodian",
field: "SystemCustodianName",
},
{
label: "System Custodian ID",
field: "SystemCustodianId",
},
{
label: "Frequency",
field: "freqency",
},
],
rows: [
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
],
};
},
};
</script>
Working sandbox

How to get data of dynamically nested Select using foreach values in Vue

I am dynamically populating the data and trying to display it.
I am getting the option id's of the Select elements, but I am not sure how do I get the parent element.
I tried to add hidden input but I cannot get value but I was not able to get the value(known issue)
new Vue({
el: "#app",
data() {
return {
variations : [
{
"id":1,
"variationName":"Material",
"created_at":"2020-08-20T16:23:18.000000Z",
"updated_at":"2020-08-20T16:23:18.000000Z",
"variant_options":[
{
"id":1,
"variants_id":1,
"variationOptionName":"Plastic",
"created_at":"2020-08-20T16:45:15.000000Z",
"updated_at":"2020-08-20T16:45:15.000000Z"
},
{
"id":2,
"variants_id":1,
"variationOptionName":"Wood",
"created_at":"2020-08-20T16:45:45.000000Z",
"updated_at":"2020-08-20T16:45:45.000000Z"
},
{
"id":3,
"variants_id":1,
"variationOptionName":"glass",
"created_at":"2020-08-20T16:46:23.000000Z",
"updated_at":"2020-08-20T16:46:23.000000Z"
},
{
"id":4,
"variants_id":1,
"variationOptionName":"pvc",
"created_at":"2020-08-20T16:47:15.000000Z",
"updated_at":"2020-08-20T16:47:15.000000Z"
},
{
"id":5,
"variants_id":1,
"variationOptionName":"unknown",
"created_at":"2020-08-20T16:47:58.000000Z",
"updated_at":"2020-08-20T16:47:58.000000Z"
}
]
},
{
"id":2,
"variationName":"color",
"created_at":"2020-08-20T16:25:14.000000Z",
"updated_at":"2020-08-20T16:25:14.000000Z",
"variant_options":[
]
},
{
"id":3,
"variationName":"type",
"created_at":"2020-08-20T16:25:45.000000Z",
"updated_at":"2020-08-20T16:25:45.000000Z",
"variant_options":[
{
"id":6,
"variants_id":3,
"variationOptionName":"working",
"created_at":"2020-08-20T16:48:44.000000Z",
"updated_at":"2020-08-20T16:48:44.000000Z"
}
]
}
],
variationOptions: [],
};
},
mounted: function () {
for (let i = 0; i < this.variations.length; i++) {
this.variationOptions.push({
values: [],
});
}
},
methods: {},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<table class="table">
<thead>
<tr>
<td>Variation Name</td>
<td>Variation Values</td>
</tr>
</thead>
<tbody>
<tr v-for="(items,index) in variations">
<td>{{items.variationName}}</td>
<td>
<select multiple class="form-control" id="exampleFormControlSelect2" v-model="variationOptions[index]['values']">
<option v-for="(variationOptions,index) in items.variant_options" :key="variationOptions.id" :value="variationOptions.id">{{variationOptions.variationOptionName}}</option>
</select>
</td>
{{variationOptions}}
</tr>
</tbody>
</table>
</div>
</div>
Also I am getting the following error.
*Error in render: "TypeError: Cannot read property 'values' of undefined"*
Where am I wrong. I would appreciate if you could take a moment to explain
Update:
I have updated the values with item.id and getting the data as I expect.
But the format is
[ { "items": { "id": [] } }, { "items": { "id": [] } }, { "items": { "id": [] } } ]
How do I remove the items and id from the result.
Fiddle

I created a snippet that is a bit more logical to me:
it structures selected values dynamically by the variationName (so works for any number of variations)
gives the ability to pass the whole selected variant_options object to the select:
<option
v-for="(option, idxj) in item.variant_options"
:key="`options-${ idxi }-${ idxj }`"
:value="option.variationOptionName"
<!-- if you set it to :value="option",
then the whole object is passed -->
>
{{ option.variationOptionName }}
</option>
new Vue({
el: "#app",
computed: {
variationOptionsArray() {
return Object.values(this.variationOptions)
}
},
data() {
return {
variations: [{
"id": 1,
"variationName": "Material",
"created_at": "2020-08-20T16:23:18.000000Z",
"updated_at": "2020-08-20T16:23:18.000000Z",
"variant_options": [{
"id": 1,
"variants_id": 1,
"variationOptionName": "Plastic",
"created_at": "2020-08-20T16:45:15.000000Z",
"updated_at": "2020-08-20T16:45:15.000000Z"
},
{
"id": 2,
"variants_id": 1,
"variationOptionName": "Wood",
"created_at": "2020-08-20T16:45:45.000000Z",
"updated_at": "2020-08-20T16:45:45.000000Z"
},
{
"id": 3,
"variants_id": 1,
"variationOptionName": "glass",
"created_at": "2020-08-20T16:46:23.000000Z",
"updated_at": "2020-08-20T16:46:23.000000Z"
},
{
"id": 4,
"variants_id": 1,
"variationOptionName": "pvc",
"created_at": "2020-08-20T16:47:15.000000Z",
"updated_at": "2020-08-20T16:47:15.000000Z"
},
{
"id": 5,
"variants_id": 1,
"variationOptionName": "unknown",
"created_at": "2020-08-20T16:47:58.000000Z",
"updated_at": "2020-08-20T16:47:58.000000Z"
}
]
},
{
"id": 2,
"variationName": "color",
"created_at": "2020-08-20T16:25:14.000000Z",
"updated_at": "2020-08-20T16:25:14.000000Z",
"variant_options": [{
"id": 1,
"variants_id": 1,
"variationOptionName": "Orange",
"created_at": "2020-08-20T16:45:45.000000Z",
"updated_at": "2020-08-20T16:45:45.000000Z"
},
{
"id": 2,
"variants_id": 2,
"variationOptionName": "Red",
"created_at": "2020-08-20T16:45:45.000000Z",
"updated_at": "2020-08-20T16:45:45.000000Z"
},
]
},
{
"id": 3,
"variationName": "type",
"created_at": "2020-08-20T16:25:45.000000Z",
"updated_at": "2020-08-20T16:25:45.000000Z",
"variant_options": [{
"id": 6,
"variants_id": 3,
"variationOptionName": "working",
"created_at": "2020-08-20T16:48:44.000000Z",
"updated_at": "2020-08-20T16:48:44.000000Z"
}]
}
],
variationOptions: {},
};
},
mounted: function() {
for (let i = 0; i < this.variations.length; i++) {
Vue.set(this.variationOptions, this.variations[i].variationName, [])
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
As Object: {{ variationOptions }}<br />
As Array: {{ variationOptionsArray }}
<table>
<thead>
<tr>
<th>Variation Name</th>
<th>Variation Values</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idxi) in variations" :key="`item-${ idxi }`">
<td>
{{ item.variationName }}
</td>
<td>
<select multiple v-model="variationOptions[item.variationName]">
<option v-for="(option, idxj) in item.variant_options" :key="`options-${ idxi }-${ idxj }`" :value="option.variationOptionName">
{{ option.variationOptionName }}
</option>
</select>
</td>
<td>
{{ variationOptions[item.variationName] }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
The biggest difference is that I didn't store the selected values in an Array but in an Object - but I provided the values also in an computed Array format for more convenience.

passing a button as a table column title in Vuejs

I want to make one of my table's column headers a clickable button. receives columns from parent like via an array like this. As you can see I want to pass a button as the last title.
<BaseTable
:columns="table.columns"
</BaseTable>
.
.
.
table: {
columns: [
{
title: "Role",
},
{
title: "No."
},
{
title: "Milestone"
},
{
title: "Status"
},
{
title: "Condition"
},
{
title:
'<button >+ View all</button>',
}
]
}
And then table component receives it as a prop an displays it like this:
<tr>
<th>
{{ column.title }}
</th>
</tr>
So the end product should look something like this:
How can I do this?

what about doing something like this?
<th>
<button v-if="column.isBtn">{{column.title}}</button>
<template v-else>{{column.title}}</template>
</th>
now in your columns array make the last object look like this:
{
title: "View all",
isBtn: true
}
so what I did is only add button to the table header column and only show it when I pass isBtn with value true in the column object
Hope this code can help you.

I recommend to use scoped slots in order to customize the rendering of that cell :
Vue.component('BaseTable', {
props: ['columns', 'data'],
template: `<table>
<thead>
<tr >
<th v-for="(col,i) in columns" :key="i">
<template v-if="col.key && $scopedSlots[col.key]" >
<slot :name="col.key" :column="col"></slot>
</template>
<template v-else>
{{col.title}}
</template>
</th>
</tr>
</thead>
</table>`
})
var app = new Vue({
el: '#app',
data: {
employees: [{
"id": "1",
"employee_name": "Tiger Nixon",
"employee_salary": "320800",
"employee_age": "61",
"profile_image": ""
},
{
"id": "2",
"employee_name": "Garrett Winters",
"employee_salary": "170750",
"employee_age": "63",
"profile_image": ""
},
{
"id": "3",
"employee_name": "Ashton Cox",
"employee_salary": "86000",
"employee_age": "66",
"profile_image": ""
},
{
"id": "4",
"employee_name": "Cedric Kelly",
"employee_salary": "433060",
"employee_age": "22",
"profile_image": ""
},
{
"id": "5",
"employee_name": "Airi Satou",
"employee_salary": "162700",
"employee_age": "33",
"profile_image": ""
},
{
"id": "6",
"employee_name": "Brielle Williamson",
"employee_salary": "372000",
"employee_age": "61",
"profile_image": ""
}
],
columns: [{
title: 'ID',
},
{
title: 'employee name',
},
{
title: 'employee salary',
},
{
title: 'employee age',
},
{
title: 'View All',
key: 'viewall'
},
]
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<div id="app">
<base-table :columns="columns">
<template v-slot:viewall="{col}">
<button class="btn btn-primary">+View All</button>
</template>
</base-table>
</div>

Binding Object to Vue multi-select

I have a table with two columns(Location and Users). The location is static information but the users is a multi-select using Vue-Select.
I need to shows users currently selected for a location on page load. I grab that information from a database.
I also need to be able to change the selected users of a location by using a multi-select that shows all users. Example Mock
Vue Outline
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" v-bind:key="index">
<td>
<span>{{ row.location }}</span>
</td>
<td>
<v-select multiple v-model="row.users">
<option v-for="user in allUsers" :key="user.id" :value="user.id">{{ user.name }}</option>
</v-select>
</td>
</tr>
</tbody>
</table>
Vue
var app = new Vue({
el: '#el',
data() {
return {
errors: [],
loading: false,
rows: this.assignments,
allUsers: this.users
}
},
props: {
assignments: Array,
users: Array
},
})
Example of how rows are returned from database
[{
"locations":[
{ "id":1,
"name":"SomePlace, CA",
"users": [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"}
]
},
{ "id":2,
"name":"AnotherPlace, CA",
"users": [
{"id":3, "name":"Person Three"}
]
}
]
},
{
"locations":[
{ "id":1,
"name":"SomePlace, CA",
"users": [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"}
]
},
{ "id":2,
"name":"AnotherPlace, CA",
"users": [
{"id":3, "name":"Person Three"}
]
}
]
}]
Example of how all users are returned from database
[
["id":1, "name":"Person One"],
["id":2, "name":"Person Two"],
["id":3,"name":"Person Three"],
]

I had moved the data coming via props directly to data object, since your rows property has one item which contains locations array, i looped through the first item rows[0] and i put row as the select options :options="row" and for the second column i looped through the user of the selectedLocation :
Vue.component('v-select', VueSelect.VueSelect)
var app = new Vue({
el: '#app',
data() {
return {
errors: [],
loading: false,
rows: [{
"locations": [{
"id": 1,
"name": "SomePlace, CA",
"users": [{
"id": 1,
"name": "Person One"
},
{
"id": 2,
"name": "Person Two"
}
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{
"id": 3,
"name": "Person Three"
}]
}
]
},
{
"locations": [{
"id": 1,
"name": "SomePlace, CA",
"users": [{
"id": 1,
"name": "Person One"
},
{
"id": 2,
"name": "Person Two"
}
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{
"id": 3,
"name": "Person Three"
}]
}
]
}
],
allUsers: this.users
}
},
props: {
assignments: Array,
users: Array
},
})
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows[0].locations" v-bind:key="index">
<td class="lead-locations">
{{row.name}}
</td>
<td class="lead-users">
<v-select multiple v-model="row.users" label="name">
</v-select>
</td>
</tr>
</tbody>
</table>
for demo check this code

I believe that the sample data supplied to the "rows" variable are missing.
So, I will make an imaginary assumption here that you have some web servers distributed in multiple locations and you want to manage access of users.
The following is my imaginary data for "rows" variable which is close enough to your data:
[
{
"serverID": 1,
"serverName": "My Backend API Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
},
{
"serverID": 1,
"serverName": "My Frontend App Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
}
]
Now, we have to loop over the servers array first, then loop over the locations array to get some thing close to your mock as follows:
Check this pen for the implementation.
JS Code:
Vue.component('v-select', VueSelect.VueSelect)
let servers = [
{
"serverID": 1,
"serverName": "My Backend API Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
},
{
"serverID": 1,
"serverName": "My Frontend App Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
}
];
let users = [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"},
{"id":3,"name":"Person Three"},
];
var app = new Vue({
el: '#app',
data() {
return {
errors: [],
loading: false,
selectedLocation: {},
rows: servers,
allUsers: users
}
}
})
HTML Code:
<div id="app">
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" v-bind:key="index">
<td colspan="2">
<b>{{ row.serverName }}</b>
<table>
<tr v-for="(location, l_index) in row.locations" v-bind:key="l_index">
<td class="col-xs-2">{{ location.name }}</td>
<td class="col-xs-8">
<v-select multiple v-model="location.users" label="name" :options="allUsers">
</v-select>
</td>
</tr>
</table>
</td>
<td class="lead-locations">
{{ row.locations.name }}
</td>
<td class="lead-users">
</td>
</tr>
</tbody>
</table>
</div>

Polymer 1.0, How to implement Infinite nested dom-repeat

I have following JSON obj,
categoryList = [{
"title": "Computers",
"categories":
[
{
"title": "Laptops",
"categories":
[
{
"title": "Ultrabooks",
"categories":
[
{
"title": "Lenovo",
"categories":
[
{
"title": "i5 intel"
}
]
}
]
},
{
"title": "Dell"
},
{
"title": "Macbooks",
"categories":
[
{
"title": "Air"
},
{
"title": "Pro"
}
]
}
]
},
{
"title": "Desktops"
},
{
"title": "Tablets",
"categories":
[
{
"title": "Apple"
},
{
"title": "Android"
}
]
},
{
"title": "Printers"
}
]
}]
As you can see, each categories could have a child categories so it could literally go on forever. I am trying to display all of them but I can't figure out how I would do this.
This is all I have so far (obviously this only gets the first child in each categories):
<template is="dom-repeat" items="{{categoryList}}" as="category">
<template is="dom-if" if="{{_hasData(category.categories)}}">
<div>{{category.title}}</div>
<template is="dom-repeat" items="{{category.categories}}" as="item">
<div>{{item.title}}</div>
</template>
</template>
</template>

You can use something like recursive code here.
Here's a plunker for same.
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="infinite-repeat">
<template>
<template is="dom-repeat" items={{categories}} as="category">
<div>{{category.title}}</div>
<template is="dom-repeat" items="{{category.categories}}" as="item">
<div>{{item.title}}</div>
<template is="dom-if" if="{{_hasData(item.categories)}}">
<infinite-repeat categories={{item.categories}}></infinite-repeat>
</template>
</template>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'infinite-repeat',
properties: {
categories: {
type: Array,
value: function() {
return [{
"title": "Computers",
"categories": [{
"title": "Laptops",
"categories": [{
"title": "Ultrabooks",
"categories": [{
"title": "Lenovo",
"categories": [{
"title": "i5 intel"
}]
}]
}, {
"title": "Dell"
}, {
"title": "Macbooks",
"categories": [{
"title": "Air"
}, {
"title": "Pro"
}]
}]
}, {
"title": "Desktops"
}, {
"title": "Tablets",
"categories": [{
"title": "Apple"
}, {
"title": "Android"
}]
}, {
"title": "Printers"
}]
}];
}
}
},
_hasData: function(item) {
return item && item.length > 0;
}
})
</script>
<infinite-repeat></infinite-repeat>

Categories

Resources