I have a html select element with options(categories). Upon selecting an option(category) I get the option's value and store it in a variable.
const currentSelectValue = $('option:selected', this).attr('value');
I also have a JSON array with all subcategories.
const myObjArr = {
data: [
{ id: 1, name: 'name_1', parent_id: '1' },
{ id: 2, name: 'name_2', parent_id: '2' },
{ id: 1, name: 'name_2', parent_id: '3' }
]
};
My goal is to get the selected option value and match it to the list of subcategories, find the parent_id(which is the value from the selected option) and list all the results.
I'm new to JavaScript, so a detailed answer with an example would be much, much appreciated. Thanks in advance!
Check this out JS .filter()
Assume you have 3 in your parent_id. Here is one line clean code solution
const myObjArr = {
data: [{
id: 1,
name: 'name_1',
parent_id: '1'
},
{
id: 2,
name: 'name_2',
parent_id: '2'
},
{
id: 1,
name: 'name_2',
parent_id: '3'
}
]
};
// if parent id is 3
const currentSelectValue = 3
const selected = myObjArr.data.filter((ele,index) => ele.parent_id == currentSelectValue
)
console.log(selected)
Related
I am trying to remove the array of objects if the given array of objects matches with the index but it is only removing the last index value.
How we can remove multiple values?
let idArr = [[{ index: 2 }], [{ index: 3 }]];
let obj = [
{
id: 1,
name: 'abc',
},
{
id: 2,
name: 'abc',
},
{
id: 3,
name: 'abc',
},
{
id: 4,
name: 'abc',
},
];
let data = obj.filter((item, i) =>
idArr.reduce((val) => val.find(({ index }) => i === index))
);
//expected output
[
{
id: 1,
name: 'abc',
},
{
id: 2,
name: 'abc',
},
];
I think that following code achieves what you're expecting
let data = obj.filter((obj, idx) => !idArr.find(id => id[0].index === idx));
I have a following array
const _array = [{id: 1, name: 'Adam'}, {id:3, name: 'Crystal'}, {id:2, name: 'Bob'}, {id: 4, name: 'Daisy'}];
How to write a single line of code in typescript to get item where name equal to Crystal from the array?
You can use array find method like following:
const _array = [
{ id: 1, name: "Adam" },
{ id: 3, name: "Crystal" },
{ id: 2, name: "Bob" },
{ id: 4, name: "Daisy" },
];
const item = _array.find((item) => item.name === "Crystal");
console.log(item);
Output
{ id: 3, name: 'Crystal' }
I have an object with this structure (imagine it could be way bigger than this)
And I need to insert a new item inside, say, 'Name 3' children array. How would I go about creating a unique id for it? I have thought about saving the ids inside the object in a separate array and then creating one that is not on that, but I'd have to maintain it and I'm not sure that would be the best approach?
let obj = {
id: 1,
name: 'Name 1',
parent_id: null,
children: [{
id: 2,
name: 'Name 2',
parent_id: 1,
children: []
},
{
id: 3,
name: 'Name 3',
parent_id: 1,
children: [{
id: 4,
name: 'Name 4',
parent_id: 3,
children: []
}]
}
]
};
EDIT: The need for a unique id is for me to be able to delete an item. This is the code I've been given to work with, I can't alter the structure.
How to set the item in Angular JS Listbox. This should be shown as selected in Listbox.
HTML
<select multiple ="multiple" style="width:180px" ng-model="md_fruitpref" ng-options="fruit.Id as fruit.Name for fruit in Fruits"></select>
Controller
//Controller to set the items in Fruit
$scope.Fruits = [{
Id: 1,
Name: 'Apple'
}, {
Id: 2,
Name: 'Mango'
}, {
Id: 3,
Name: 'Orange'
}, {
Id: 4,
Name: 'Guava'
}, {
Id: 5,
Name: 'Banana'
}, {
Id: 6,
Name: 'Watermellon'
}];
This will fill the Listbox with the various fruits.
Now I want to show the webpage with all the fruits in the Listbox but selected with Apple and Watermellon. So I do this but it does not help.
$scope.md_fruitpref= [{
Id: 1,
Name: 'Apple',
Id: 6,
Name: 'Watermellon'
}];
How to set value in Angular JS Listbox?
Try:
// array with 2 elements (each one an object with the same properties)
$scope.md_fruitpref= [{
Id: 1,
Name: 'Apple'
}, {
Id: 6,
Name: 'Watermellon'
}];
The structure you currently have does not work because you only have one element in your md_fruitpref array, and the object is invalid because it uses the same keys twice.
Finally I found the answer to this.
It will be :-
$scope.md_fruitpref= [1,6];
After this line soon you will see the selection in Listbox
How do I use the following data properties to render a tree view using nested unordered lists(<ul>)?
// parentId value is always 0 for root nodes, otherwise this value corresponds to the id of its parent
// sequence represents the order of the element in the branch
// level represents the tree level of the element, root nodes will have a level of 1
var data = [
{ id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
{ id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
{ id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
{ id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
{ id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 },
{ id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 }
];
The result should look like the following:
A
Alan
Abe
B
Bir
Boromir
I have tried with for loops but soon I was repeating code to get the child nodes and I wasn't able to refactor it into a recursive function.
Here's a CodePen with the data: http://codepen.io/nunoarruda/pen/KgVPmv
I will answer following part of the OP's question ...
How do I use the following data properties to render a tree view using nested unordered lists()?
With the given data structure there is no need for a recursive solution. A combination of sorting the provided data list and then transforming it via a specific reduce callback already does the job ...
var
dataList = [
{ id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 },
{ id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 },
{ id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 },
{ id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 },
{ id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 },
{ id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 }
],
htmlListFragment = dataList.sort(function (a, b) {
// sort by `level` or, if both are equal (sub)sort by `sequence`
return (a.level - b.level) || (a.sequence - b.sequence);
}).reduce(function (collector, item) {
var
registry = collector.registry,
fragment = collector.htmlListFragment,
parentId = item.parentId,
id = item.id,
name = item.name,
member = registry[id];
if (!member) {
member = registry[id] = document.createElement("li");
member.id = id;
member.appendChild(document.createTextNode(name));
member.appendChild(document.createElement("ul"));
if ((item.level === 1) && (item.parentId === "0")) {
fragment.appendChild(member);
} else {
registry[parentId].getElementsByTagName("ul")[0].appendChild(member);
}
}
return collector;
}, {
registry : {},
htmlListFragment: document.createElement("ul")
}).htmlListFragment;
console.log("htmlListFragment : ", htmlListFragment)