I have data in database with nested object like:
[{"id":"1-368","name":"\tSolan","days":1,"daynights":2,"hotel":{"hotel_data":[{"id":1,"title":"hotel 1"}],"checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":[{"id":1,"title":"hotel 1"}],"checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":""},{"id":"2-54","name":"Dharamsala","days":"3","daynights":4,"hotel":{"hotel_data":[{"id":3,"title":"hotel3"}],"checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":[{"id":2,"title":"hotel 2"}],"checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":""}]
Now when I am trying to fetch data and try to assign to a state through mutation it get assigned incompletely like:
[{"id":"1-368","name":"\tSolan","days":1,"daynights":2,"hotel":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":"","date_from":"08 Jan 2020","date_to":"09 Jan 2020"},{"id":"2-54","name":"Dharamsala","days":"3","daynights":4,"hotel":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":"","date_from":"09 Jan 2020","date_to":"12 Jan 2020"}]
In above code you can notice hotel_data is a nested array but not able see after assigning it to vuex state.
code:
const mutations = {
setItem(state, item) {
state.item.tour_location=JSON.parse(item.tour_location);
}}
What do you see if you console.log(item.tour_location); within the setItem mutation? If the data is coming in with the correct structure, I would recommend setting up your state as a skeleton of the expected data.
For example:
Expected data: {id: 'abc', hotel: [{ prop1: '123', prop2: '234']}
Vuex state: {id: '', hotel: [{ prop1: '', prop2: '' }]}
Hope this helps.
Related
I'm trying to write a typeORM query which includes multiple where clauses. I am able to achieve this via where option as follows:
const categories = [
{ name: 'master', categoryTypeId: 2, parentId: 1, locationId: null },
{ name: 'food', categoryTypeId: 3, parentId: null, locationId: null }];
const rows = await Repo.find({
where: categories.map((category) => ({
name: category.name,
categoryTypeId: category.categoryTypeId,
locationId: category.locationId
})),
});
I would want to maintain the mapping b/w the input array and the rows returned. For example, I know that the second category doesn't exist in the DB. I would want to have an empty object in the rows variable so that I know which categories didn't yield any result.
Upon research I have found that we can do something with SQL as mentioned here. But, I'm not sure how do I translate into typeORM if I can.
i have the state that control the flatList data
const [data, setData] = useState([])
i have a object like below(after get from network, it's show success in FlatList)
data = [{
'name' : 1,
},
{'name' : 2,
}]
Now i want to update first object {'name': 1} by add some key/value like this:
{ 'name' : 1, 'text' : 'this is text'}
Here is my code:
const mathched = data[0]
mathched = [
...mathched,
{'text': 'this is text'}
]
But i got error: TypeError: "mathched" is read-only
I tried other solution by set new key to object:
const newData = [...data]
const mathched = newData[0]
mathched['text'] = 'this is text'
setData(newData)
But data not changed
Can someone guide me how to use Speard Operator to done my solution? Thanks
The problem is that the state value is a read-only variable that can be modified only via the setter, setData in this case.
When you do const matched = data[0] then matched = newData[0] you are attempting to store the new value without the setter usage.
One way to go would be:
// Usign for example Lodash clone
const newClonedData = clone(data);
newClonedData[0] = { ...matched[0], {'text': 'this is text'} };
setData[newClonedData];
I have followed the doc for the ReferenceArrayInput (https://marmelab.com/react-admin/Inputs.html#common-input-props) but it does not seem to be working with relationship fields.
For example, I have this many-to-many relation for my Users (serialized version) :
Coming from (raw response from my API):
I have setup the ReferenceArrayInput as followed :
<ReferenceArrayInput source="profiles" reference="profiles" >
<SelectArrayInput optionText="label" />
</ReferenceArrayInput>
I think it's making the appropriate calls :
But here is my result :
Any idea what I'm doing wrong ?
Thanks in advance for your help !
On docs, ReferenceArrayInput is said to expect a source prop pointing to an array os ids, array of primitive types, and not array of objects with id. Looks like you are already transforming your raw response from api, so if you could transform a bit more, mapping [{id}] to [id], it could work.
If other parts of your app expects profiles to be an array of objects, just create a new object entry like profilesIds or _profiles.
As gstvg said, ReferenceArrayInput expects an array of primitive type, not array of objects.
If your current record is like below:
{
"id": 1,
"tags": [
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle' }
]
}
And you have a resource /tags, which returns all tags like:
[
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle' },
{ id: 'photography', name: 'Photography' }
]
Then you can do something like this (it will select the tags of current record)
<ReferenceArrayInput
reference="tags"
source="tags"
parse={(value) => value && value.map((v) => ({ id: v }))}
format={(value) => value && value.map((v) => v.id)}
>
<AutocompleteArrayInput />
</ReferenceArrayInput>
I'm using v-for to produce a set of vuetify v-timeline-item with elements being customized based on values stored in a customization object:
<v-timeline-item
v-for="target in targetsList"
:key="target.uid"
:color="typesConfig[target.format].color"
:icon="target.icon"
large
fill-dot
>
I would like to pick a color from the typesConfig object based on the value of target.format.
typesConfig is a computed property that looks like this:
const typesConfig = {
doc: {
color: 'red lighten-2',
icon: 'mdi-star',
}, etc...
I'm having trouble figuring out how to grab the color value from the object and assign it to :color. I have tried all sorts of things including string literals with no luck :(
I hope the above is clear and your help would be appreciated.
thank you.
You said typesConfig is a computed property that looks like this: ... but that's not what a computed property looks like.
It looks like you have defined a constant outside of the Vue object.
I mocked up your component with typesConfig as a data property and the template you have works perfectly.
You would only need a computed property if you were computing from something else, say targetsList, but you intend to remove color and icon from those objects.
So, it's likely you just need a data property that is initialized from your const, something like
const typesConfig = {
doc: {
color: 'red lighten-2',
icon: 'mdi-star',
},
}
export default {
data: () => ({
targetsList: [
{ uid: 'ABC', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' },
{ uid: 'def', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' },
{ uid: 'ghi', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' }
],
typesConfig: typesConfig
})
};
I resolve most of my problem only few left out of which this one is preventing me to submit the form. I am using Nativescript + vue and without Typescript. how to display the Valueproviders with array list? Here is the code
https://play.nativescript.org/?template=play-vue&id=2oWObE
There was the problem with your data type. As per the documentation Array should have key and label properties. But still if you want id and name then you should try like below.
'valuesProvider': {
key: 'id',
label: 'name',
items: [
{ id: 1121, name: 'Shanghai' },
{ id: 3651, name: 'Lagos' },
{ id: 5213, name: 'Moscow' },
{ id: 6214, name: 'São Paulo' },
{ id: 6985, name: 'Sydney' }
]
};
https://docs.nativescript.org/vuejs/ns-ui/DataForm/dataform-editors-providers
Anyway, I tried that and that was not working for me either then searched for it and relaised that there is an open feature request to support the valuesProvider for picker from JSON metadata. You can vote to support the same feature.
https://github.com/NativeScript/nativescript-ui-feedback/issues/369
Solution
Just get you cityList out of vue data and map your data
https://play.nativescript.org/?template=play-vue&id=2oWObE&v=6
more detailed version with groups
https://play.nativescript.org/?template=play-vue&id=rqK7wO&v=3