Currently working with Bootstrap-vue. I need to generate b-table but with dynamic header values which I get from api, not sure how to go about doing this.
I have tried regular way to set fields in data which works fine but if I try to set computed fields I get no values in my table .
`
computed: {
fields () {
return ['date', ...this.scheduler.times]
}
}
`
The this.scheduler.times is data received from api which contains array like below. Also this array can have more times added
(data from api)
`
[
{
"id": 1,
"start": "01:30:00",
"end": "09:30:00"
},
{
"id": 2,
"start": "10:00:00",
"end": "13:00:00"
}
]
`
Expected result would be where I have columns headers with times from api and added column of dates.
I can generate series of dates using moment but not sure how will i map this to the b-table
Below is a screenshot of result I would like to get:
Any help would be greatly appreciated.
Thanks
I think this is something, you are looking for:
<b-table :items="items" :fields="fields">
<template v-for="field in dynamicFields" v-slot:[`cell(${field.key})`]="{ item }">
</b-table>
in scripts:
this.dynamicFields.push({key: 'someTestKey', label: '1:30AM - 2:30AM'})
Related
I am trying to create an item on Monda.com through Integromat.
But it fails to create with an error code below;
I am an absolute beginner and unfamiliar with coding stuff but I am trying to create this looking at other existing scenarios... Please help me out!
RuntimeError
[200] invalid value, please check our API documentation for the correct data structure for this column. https://api.developer.monday.com/docs/change-column-values [ Error Code: ColumnValueException / Error Details: {"column_value":"{"url"=>"[Collection]", "text"=>nil}","column_type":"LinkColumn"} ]
mutation {
create_item (
board_id: 3483681072,
group_id: "topics",
item_name: "{{3.name}}",
column_values: "{
"text": "{{3.mappable_column_values.mirror29}}",
"text2": "{{3.mappable_column_values.mirror0}}",
"text7": "{{3.mappable_column_values.mirror1}}",
"text76": "{{3.mappable_column_values.mirror8}}",
{{5.Actual Photoshoot date}}
"text6": "{{3.mappable_column_values.mirror75}}",
"status_10" : {
"label" : "{{3.mappable_column_values.status_10}}"
},
"numbers": "{{3.mappable_column_values.numbers}}",
"link_to_ready_photos": "{{3.mappable_column_values.link_to_ready_photos}}",
"link": "{{3.mappable_column_values.link}}",
{{5.Photoshoot Start}}
"text35": "{{3.mappable_column_values.text35}}"
}",
create_labels_if_missing: true
) {id}
}
Tried copied pretty much everything from the scenarios running without problems, and tweaked some column IDs accordingly.
This may be a simple fix but I'm new to react so I appologize in advance. I have nested data that I would like to display on a list. The data is being pulled and displayed below.
data: [
{
"id": 1,
"domain_url": "localhost",
"created_on": "2020-05-26",
"config": [
{
"test_name": "test",
"test_description": "test",
}
]
}
]
I can get the domain_url and created_on displaying just fine but nothing I've tried gets any of the config items to appear.
below is the current method I'm using.
<tbody>
{this.props.data.map((data) => (
<tr key={data.id}>
<td>{data.domain_url}</td>
<td>
{data.config.map((sub) => {
sub.test_name;
})}
</td>
<td>{data.created_on}</td>
<td>
...
how can I get the test name from the config array to display? Any help would be appreciated. Thank you!
Your code looks right - I think you just need to add a ‘return’ in front of your ‘sub.test_name;’
In my site development I have provided combobox where the user can select the columns to be displayed and the data will fetched and presented based on the users requests. So I have provided the combo box selection as below,
<div id="filterColumns" style="width: 1px; min-width: 100%;">
<oj-label for="multiSelect">Select Columns</oj-label>
<div id="columnsList">
<oj-select-many help.instruction="Select the columns to populate the data" id="multiSelect" value={{selectedColumns}} style="max-width:50em">
<oj-option value="Name">Name</oj-option>
<oj-option value="Age">Age</oj-option>
<oj-option value="Gender">Gender</oj-option>
<oj-option value="Mainden Name">Mainden Name</oj-option>
<oj-option value="Mothers Name">Mothers Name</oj-option>
<oj-option value="Designation">Designation</oj-option>
<oj-option value="Experience">Experience</oj-option>
<oj-option value="Company">Company</oj-option>
<oj-option value="Location">Location</oj-option>
</oj-select-many>
</div>
<oj-button id='filterColumnsGo' on-oj-action='[[generateData]]'>Generate Data</oj-button>
</div>
And in the ViewModel, am getting the column names which are selected the user,
self.selectedColumns = ko.observableArray(document.getElementById('columnsList'));
and call the Elasticsearch API with the data based on the selection.
Below is the response of one data,
{
"_index": "person_data",
"_type": "_doc",
"_id": "moahn",
"_score": 1,
"_source": {
"person_details": {
"age": 23,
"gender": "male",
"mothers_name": "Jabito",
"mainden_name": "Rosoku",
"designation_info": {
"designation_name": "Architect",
"company": {
"company_location": "Delhi",
"experience": 4,
}
}
}
}
}
Am looking for the way to parse the data in the same order of user selected the column names in the combobox. I was trying to loop through as below, and for each loop was trying to loop the fetched data but not working as expected,
self.selectedColumns().forEach(function(col){
tempCols.push({headerText: col, field: col});
...
...
});
Since the Elasticsearch doesn't provide the item name details where I can simply get it and the data returned by ES is nested JSON formatted result where it will not have the same name as what displayed for the user selection in combo box. Any help would be appreciated
The simplest way to do this is to have a "schema" like mapping file where you specify how the columns map one to one with the fields. So you can do something like this:
ColumnDataMapping: {
"age": { field: "age", label: "Age" }
"mothersName": { field: "mothers_name", label: "Mothers Name" },
"designation": { field: "designation_info.designation_name", label: "Designation" }
"location": { field: "designation_info.company.company_location", label: "Location" }
...
}
Then in your view model using that mapping you can get the columns and the fields they are mapped to. Note that in your combo-box you would not have the same values as labels. You values would be the keys in the ColumnDataMapping and your labels would be the label fields.
This way you can be flexible with your code since all you care about is the correct configuration of the "schema". So you decouple from the code the knowledge of how fields are mapped etc.
This also allows you now to store that "schema" and make it customizable. You can also add any fields you want to extend it ... like enabled for a field etc.
I have data:
data = {
"laptop": [
"dell",
"hp",
"lenovo",
"acer",
"asus"
],
"mobile": [
"lenovo",
"motorolla",
"apple",
"samsung"
]
}
I am trying to display it in the table using the ngFor for displaying the data in the below format
But I am unable to get the data in the below rather than I am getting only data in the traditional format leaving laptop,mobile keys
is there any way to do that in the template
Stackblitz demo
is there any alternative approach or better becoz in future i may get n rows for the table
If you are using angular 6.1 you can use keyvalue
<div *ngFor="let title of data | keyvalue">
{{title.key}}
</div>
Example :https://stackblitz.com/edit/keyvalue-pipe
You can use this :
get dataKeys() { return Object.keys(this.data); }
This will create an array of the keys of your object.
You can now use a loop on it :
<div *ngFor="let key of dataKeys">
<div *ngFor="let item of data[key]">...</div>
</div>
Basically what I want to achieve is GET data from server and display the data in the nested json to display in Multiselect, Vue-Multiselect
After displaying, i'm able to add new tags to it if i want (Being able to update it).
I'm able to get the objects from the nested json to display in multiselect, but I'm not sure how to customize it to only show the name.
Current behaviour:
So expected behaviour would be, only Sofa, Table and Chair should be shown in the multiselect:
Is there a way for me to only display like the picture above?
After implementing #Ikbel's way of getting the json object and showing only the required name. Now I have another problem which is I get duplicates of the options whenever I add a new tag to it.
This is my Vue Code:
<template>
<multiselect :multiple="true"
v-model="data.subCategoryNames"
:hide-selected="true"
:selected="data.subCategoryNames"
:options="computedSubCategoryNames"
:taggable="true"
#tag="addTag"
>
</multiselect>
</template>
methods: {
addTag (newTag) {
// this.options.push(newTag)
this.data.subCategoryNames.push(newTag)
}
}
computed: {
computedSubCategoryNames () {
return this.allSubCategoryNames.map((item) => {
this.options.push(item.subCategoryName)
this.data.subCategoryNames.push(item.subCategoryName)
return item.subCategoryName
})
}
}
Which shows this:
Thank you for your help!
Ok #mary. Here is a better solution. Simply add label="subCategoryName" to your multiselect component to make it show subCategoryName only instead of the whole object. So no need for a computed property.
track-by should be used to avoid duplicate values.
Here is a working example.
let Multiselect = VueMultiselect.Multiselect
let vm = new Vue({
el: '#app',
data: {
data: {
subCategoryNames: [],
options: [
{subCategoryName: 'Chair', count: 2},
{subCategoryName: 'Table', count: 5},
],
},
},
components: {
Multiselect
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect#2.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.0.0/dist/vue-multiselect.min.css">
<div id="app">
<multiselect :multiple="true"
v-model="data.subCategoryNames"
:hide-selected="true"
:selected="data.subCategoryNames"
:options="data.options"
:taggable="true"
label="subCategoryName"
track-by="subCategoryName"
>
</multiselect>
{{data.subCategoryNames}}
</div>
Use a computed property to extract the subcategory names. Here is how you can do it.
Bind your multiselect options to a computed subCategoryNames instead. Let's call it computedSubCategoryNames, and use the array method map() to extract subCategoryName from subCategoryNames. Here is an example:
<multiselect :options="computedSubCategoryNames">
</multiselect>
And in define computedSubCategoryNames:
computed: {
// Returns ['Chair', 'Sofa', 'Table']
computedSubCategoryNames() {
return this.subCategoryNames.map(function(item) {
return item.subCategoryName
})
}
}
Please refer below URL, onether approach to show multiselect drop down in android
https://asnehal.wordpress.com/2012/04/03/multi-select-drop-down-list-in-android/