to make things clear... I want to explain the basis first.
I have a PRODUCT.
a PRODUCT has different VARIANTS (id, code, price).
VARIANTS have ATTRIBUTES (id, type[select, radio], name).
ATTRIBUTES have VALUES (id, label).
I have a REACT APP to handle variant selecting in product detail (where u add the product into the cart).
It's functioning is this:
All attributes are printed by ID and their selecting html input type is made according to their type (I've specified above).
So... WHAT I WANT TO ACCOMPLISH is THIS.
EXAMPLE:
I have 2 attributes: COLOR, SIZE.
COLOR has 2 values: WHITE, BLACK.
SIZE HAS 3 VALUES: M, L, S.
Product "A" has 2 variants:
#1 VARIANT - COLOR: WHITE; SIZE: M
#2 VARIANT - COLOR: BLACK; SIZE: L,
in a react APP.. I want to filter out ALL options that aren't available to select an existing variant. User CAN NOT select COLOR WHITE; SIZE L variant because it doesn't exist. So, I want to disable the option for him/her.
My REACT STATE structure is the following...
{
"attributes": [
{
"id": 1,
"type": "select",
"name": "size",
"values": [{id: 1, value: "M", selected: true}, {id: 2, value: "L", selected: false}, {id: 3, value: "S", selected: false}],
},
{
"id": 2,
"type": "radio",
"name": "color",
"values": [{id: 1, value: "WHITE", selected: false}, {id: 2, value: "BLACK", selected: false}],
}
],
"variants": [
{
id: 1,
values: [
{
attribute_id: 1,
id: 1
},
{
attribute_id: 2,
id: 1
}
]
},
{
id: 2,
values: [
{
attribute_id: 1,
id: 2
},
{
attribute_id: 2,
id: 2
}
]
}
]
}
so...when I select color WHITE and the size stays unselected... only the option "M" should be displayed. But when I select color BLACK... the size option should be "L" only.
but when NOTHING is selected => EVERYTHING should be visible.
This check should happen EVERYTIME any ATTRIBUTE VALUE Changes. (when I select a SIZE = FILTER OTHER ATTRIBUTES etc...) and it should work dynamically no matter how many attributes are available for a variant.
Any ideas on how to do this please?
THANKS FOR YOUR HELP :)
Related
Similar to zyBooks if you are familiar with it, I want to track the sections the user has read through and checked completed with a button.
However, conceptually I am having trouble thinking of what to store in my mongo database, besides just an object or an array of objects that contains each section and bool values, to track their progress. A section will have around 10 subsections. But there will be around 8 sections total. So a total of 80 subsections to keep track of.
This is what I was thinking of but it seems inefficient.
const sectionArray = [
{
section: "1",
completed: false,
subsections: [
{
name: "1.1",
completed: false,
},
{
name: "1.2",
completed: false,
},
{
name: "1.3",
completed: false,
},
],
},
{
section: "2",
completed: false,
subsections: [
{
name: "2.1",
completed: false,
},
{
name: "2.2",
completed: false,
},
{
name: "2.3",
completed: false,
},
],
},
...
];
I will also display a section and its subsections content depending on which the user decides to view using react and material ui.
I do not want to commit to my method if there is a better alternative.
I think your approach is totally fine with that amount of data.
The question is, what do you mean with "inefficient" ?
From a performance point of view, 80 elements are just no problem. Maybe you just don't feel well with handling that code (which is a valid reason).
An alternative would be:
const sectionArray = [
{ section: "1", completed: false },
{ section: "1.1", completed: false },
{ section: "1.2", completed: false },
]
or (quicker access of the sections, e.g. without a .find()):
const sectionCollection = {
"1": false,
"1.1": false,
"1.2": false,
]
Maybe you don't need to store the main sections, if they are implicitly done when all sub sections are done ?
const sectionCollection = {
"1.1": false, // "1" is implicitly done if all "1.x" are done
"1.2": false,
]
Probably not an appropriate alternative (would be more efficient if most items are likely always false):
const sectionArray = [ "1", "1.3", "3.2" ] // 1, 1.3, 3.2 are 'true', all others are 'false'
Just for fun: You might also use integers as section IDs (which is ridiculously over optimizing on the wrong end):
const sectionCollection = [ 100, 103, 302 ] // list of integers
const sectionCollection = [ 0x10, 0x13, 0x32 ] // using hex or bin
const sectionCollection = { [100]: false, [101]: true } // integer keys
And then even store a Byte array instead of JSON.
I am using the Vuetify v-data-table component, and I am trying to select rows on my table and convert them to csv. So I would like to select all rows, have my selected rows in an array of objects, and then click a button to perform a function that does the conversion, however I am facing an issue with the v-data-table component, when I select the rows, instead of them being pushed into my array based on the order they are selected (clicking on checkboxes), they are not pushed into my v-model array as expected, it's as if every time I click on a row, the v-model or v-data-table component sorts the resultant "selected" array by my item-key ascending, even though I do not have that set, for example, here is my code:
<template>
<v-card>
<v-data-table
v-model='selected'
:headers='headers'
:items='results'
item-key='id'
show-select
dense
></v-data-table>
</v-card>
</template>
<script>
export default {
data: () => ({
headers: [
{ value: 'id', text: 'ID', fixed: true, active: false },
{ value: 'd_submission_date', text: 'Date of Submission', active: true },
{ value: 'i_sample_count', text: 'Number of Samples', active: true },
{ value: 'i_file_count', text: 'Number of Files', active: true },
{ value: 'created_at', text:'Created At', active: false },
{ value: 'updated_at', text: 'Updated At', active: false }
]
results: [{
"id": 1203,
"d_submission_date": "2021-04-08",
"created_at": "2021-04-08T18:19:31.011561Z",
"updated_at": "2021-04-14T21:42:35.285029Z",
"i_sample_count": 1,
"i_file_count": 0
},
{
"id": 1202,
"d_submission_date": "2021-04-08",
"created_at": "2021-04-08T18:19:31.011561Z",
"updated_at": "2021-04-14T21:42:35.285029Z",
"i_sample_count": 1,
"i_file_count": 0
},
{
"id": 1201,
"d_submission_date": "2021-04-08",
"created_at": "2021-04-08T18:19:31.011561Z",
"updated_at": "2021-04-14T21:42:35.285029Z",
"i_sample_count": 1,
"i_file_count": 0
}],
selected: []
})
</script>
So if I select the row with id 1203 by clicking the checkbox next to it, the object will be pushed into my selected array via the two-way binding with v-model, so "selected = [{
"id": 1203,
"d_submission_date": "2021-04-08",
"created_at": "2021-04-08T18:19:31.011561Z",
"updated_at": "2021-04-14T21:42:35.285029Z",
"i_sample_count": 1,
"i_file_count": 0
}]"
But then let's say after doing this I select the row with id 1201, and then the row with id 1202, I would expect my selected array to be "selected = [{ id:1203, etc. }, { id:1201, etc. }, { id: 1202, etc. }]" BUT INSTEAD, I get this array: "selected = [{ id:1201, etc. }, { id:1202, etc. }, { id: 1203, etc. }]"
So for some reason the data is getting auto-sorted by my item-key ascending and I have no idea why or how to stop this! I have tried so many v-data-table props like sort-by-desc and sort-by='id' to no avail, has anyone else experienced this or have any idea what to do, any help is appreciated!
Thanks in advance
The v-data-table treats the v-model array differently based on the item-key, I had tables where my item-key was a string with alphabetical characters AND numbers in the key string, and then item-keys that were JUST numbers (but still a string), and the component treated them differently in the v-model, absolutely insane
Hey sorry if this has been asked before, I haven't found an answer that has helped me.
I am working on building a personal application using the free Ticketmaster application but I'm having trouble with the JSON response.
An example of the response is:
data: {
classifications: [
type: {
id: 1,
name: "Dont want this"
}
],
[
type: {
id: 2,
name: "Dont want this"
}
],
[
category: {
id: 3,
name: "Food & Drink"
}
],
[
category: {
id: 4,
name: "Music"
]
}
I am trying to retrieve category names such as "Family", "Food & Drink", "Music" etc but only at some indexes does the array have category objects, the others have type.
Can someone tell me how to go through this array and only get the name when it is at category.name?
Any help is appreciated :)
I have this array:
myArray: [{
name: "Name1",
subArray: [{
name: "Subname1",
value: 1
}]
}, {
name: "Name2",
subArray: [{
name: "Subname2",
value: 2
}]
}, {
name: "Name3",
subArray: [{
name: "Subname3",
value: 3
}, {
name: "Subname4",
value: 4
}]
}, ]
I am using this array in a Vue app, but this should not be vue-specific.
In a dropdown I am showing all the values from the parent array (Name1, Name2, Name3). So far, so good. In Vue I do it like so:
<option v-for="array in myArray">
But, when the user has selected the parent array, I have another dropdown below, which should show the children of the selected object. So if the user selects Name3, there should be two options in my other dropdown with the two subArray's values.
How can I achive this?
Try using
<option v-for="option in myArray[index].subArray">
where index is index of your first option.
Hello I have the following JSONs
$scope.Facilities=
[
{
Name: "-Select-",
Value: 0,
RegionNumber: 0
},
{
Name: "Facility1",
Value: 1,
RegionNumber: 1
},
{
Name: "Facility2",
Value: 2,
RegionNumber: 1
},
{
Name: "Facility3",
Value: 3,
RegionNumber: 2
}
];
$scope.Regions=
[
{
Name: "-Select-",
RegionNumber: 0
},
{
Name: "USA",
RegionNumber: 1
},
{
Name: "Mexico",
RegionNumber: 2
}
];
I would have two DropdownLists in my app which will have one of these Jsons assigned to it.
Whenever you select a Region, a ng-change would be triggered. What I want, is to make the Facility DDL to update it's values. It would only show the Facilities which have a RegionNumber equivalent to the selected Region's RegionNumber.
How could I achieve this? I'm using Angular JS, MVC...
Note: The -Select- Value must always appear, even if it's value is zero and is not equivalent to the selected Region.
While a data structure, like greengrassbluesky may simplify the result, you can accomplish the same thing with an onchange that leverages javascript filtering
$scope.Facilities = masterFacilities.filter(function (el) {
return regionNumber = el.RegionNumber == $scope.SelectedRegion || el.RegionNumber == 0;
});
Here's a fiddle with an example using your lists.
I think you need a data structure like below:
$scope.Regions=
[
{
Name: "-Select-",
facilities : {
facilityId: 1,
facilityName: "facility1"
},
{
facilityId: 2,
facilityName: "facility2"
}
},
{
Name: "USA",
facilities : [{
facilityId: 1,
facilityName: "facility1"
},
{
facilityId: 2,
facilityName: "facility2"
}]
},
];
So, you could reference them like below:
For the dropdown of Regions, you can iterate through above Data structure.
Store the selectedRegion in selectedRegion
Then use that for the dropdown for facilities.