I have list of data that want to show using FlatList , as all examples I have seen like this from reactnativeexpress.com :
const sections = [
{
id: 0,
title: 'Basic Components',
data: [
{id: 0, text: 'View'},
{id: 1, text: 'Text'},
{id: 2, text: 'Image'},
]
},
{
id: 1,
title: 'List Components',
data: [
{id: 3, text: 'ScrollView'},
{id: 4, text: 'ListView'},
]
}
]
Items should be a list named data but if I get data from an API that items list is not named data, and it will not show the content. ( I tested with this example and if change data to dat items will not shown) , is there any way to change data default name or not?
I finally realized that item list should be named data so I added a pointer to my list :
content.payload.APIList.map((eachcat) => eachcat.data = eachcat.APISubList)
Related
I am using this to implement drag-drop in my vue app. Lets my array is:
lists: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]
I want to get the element object from the list after finishing the drop event. For example, I am moving the Item 1 item. After finishing the drag-drop, I want to get the print of which item has been moved. So, I want to get the output:
{ id: 1, name: 'Item 1' }
To get that, I have used #end:
<draggable
class="list-group"
ghost-class="moving-card"
:list="lists"
group="my-group"
#end="finish($event, lists)"
>
And at finish function, I would like to get the desired output: { id: 1, name: 'Item 1' } from my <v-list v-for="list in lists"></v-list>. So, what to do at this function?
finish (evt, draggedList) {
// console.log('finished')
// desired output (if item 1 has been moved):
// { id: 1, name: 'Item 1' }
}
Codepen Demo
Use #change="finish" then change your method:
finish (item) {
console.log(item.moved.element) // { id: 1, name: 'Item 1' }
}
RTM: https://github.com/SortableJS/Vue.Draggable#events part which mentions change event.
I am looking for a way to make a break in the display name and it seems impossible to me.
I'm right? I mean the data attribute: [{ }]
for example I need a space in name: link nameA/B and I dont want to use link_nameA
Morris.Area({
element: 'myfirstchart',
data: [{
date: '2021-10-19',
link nameA: 2,
link nameB: 3,
extra: 0
},
{
date: '2021-10-20',
link nameA: 5,
link nameB: 4,
extra: 0
}
],
xkey: 'date',
ykeys: ['link nameA', 'link nameB', 'extra'],
xLabels: 'day',
labels: ['link nameA', 'link nameB', 'extra'],
pointSize: 3,
fillOpacity: 0,
pointStrokeColors: ['#00bfc7', '#00bfc7', '#9675ce'],
behaveLikeLine: true,
gridLineColor: '#e0e0e0',
lineWidth: 3,
hideHover: 'auto',
lineColors: ['#0bc36e', '#00bfc7', '#9675ce'],
dateFormat: function(date) {
d = new Date(date);
return d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
},
resize: true
});
is there any way to fulfill my need? because with space script will not working.
thanks.
With JavaScript, object keys can contain spaces if the key is wrapped in quotes.
const data = {
"link nameA": "foobar",
}
console.log(data['link nameA'])
The problem is that data fetched by useGetList is sorted by ids of the objects and ignores the order by other keys given by my backend. This is my call example (try to order by name):
const { data, loading } = useGetList(
'my-controller-path',
{ page: 1, perPage: 10000 },
{ field: 'name', order: 'ASC' },
{}
)
console.log(data)
When I print data after this call, data is sorted by 'id' and not by 'name'. It's not a problem with the backend because I hardcoded returning data to eliminate this from equation. Data provided from backend:
data: [
{ id: 2, name: 'Ana'},
{ id: 3, name: 'Bea'},
{ id: 1, name: 'Cena'}
]
And when I print data on console after using useGetList:
[
{id: 1, name: "Cena"},
{id: 2, name: "Ana"},
{id: 3, name: "Bea"}
]
Any idea what is causing the problem? I read the source code of useGetList and don't quite understand if the problem lays there. The link to source code.
How does your API works ? In my case, I needed to map the sort properties like so:
getList: async (
resource,
{ pagination: { page, perPage }, sort: { field, order }, filter }
) => {
const query = {
...filter,
sort: order.toLowerCase(),
order: field,
page: JSON.stringify(page),
limit: JSON.stringify(perPage),
};
...
}
in my custom data provider to match my API sort and order properties.
I have a table with parameters as shown below.
{
id: 1,
title: 'waccos',
description: 'Making an operating system in wacc',
est_duration: 420,
exp_req: 'any',
langs: [ 1 ],
owner: 1,
members: [ 1, 2 ]
},
I want to use SQL to add a new member into the member list, but I do not know how to. The table is called testprojects. I've tried using
(update testprojects
set members = members || $1
where title is $2;', [name, title])
but I think that is wrong. Could anyone help me please?
This is the table of members so far.
[
{ id: 1, name: 'A' },
{ id: 2, name: 'K' },
{ id: 3, name: 'S' },
{ id: 5, name: 'd' },
{ id: 6, name: 'J' },
{ id: 7, name: 'E' },
{ id: 8, name: 'a' }
]
I'm trying to connect Gridx grid to JsonStore. The code and data is bellow. The problem is that Gridx is rendered correctly but it says: No items to display. Anybody know what I'm doing wrong? Dojo and Gridx are the latest versions installed with cpm.
edit: there is no ajax requet to /test/ in the Firebug/Chrom development tools
structure: [
{ field: 'id', name: 'Id' },
{ field: 'title', name: 'Title' },
{ field: 'artist', name: 'Artist' }
],
store: new JsonRestStore({
idAttribute: 'id',
target: '/test/'
}),
Data returned by /test is like this:
{
identifier: "id",
label: "title",
items: [
{
id: 1,
title: "Title 1",
artist: "Artist 1"
},
{
id: 2,
title: "Title 2",
artist: "Artist 2"
},
...
}
Grid is created with:
this.grid = new Grid({
structure: structure,
store: store,
modules: [
Pagination,
PaginationBar,
//Focus,
SingleSort,
ToolBar
],
//paginationInitialPage: 3,
paginationBarSizes: [10, 25, 50, 100],
paginationBarVisibleSteppers: 5,
paginationBarPosition: 'bottom'
}, this.gridNode);
have you specified which cache to use? In your case it should be an Async cache.
require([
'gridx/core/model/cache/Async',
.....
], function(Cache, ...){
this.grid = new Grid({
cacheClass: Cache,
......
});
I've found that this happens when the server doesn't return the Content-Range header in the response. Apparently the store isn't smart enough to just count the items in the returned array...