Tell a beginner web delepoer how to get all title from all objects in array
this is my array
0: {id: 6, category_id: 2, title: "Test", brand: "Test", serial_number: "2165412315864",…}
1: {id: 7, category_id: 3, title: "Test2", brand: "Test2", serial_number: "2165412315864",…}
2: {id: 8, category_id: 5, title: "New", brand: "New", serial_number: "2165412315864",…}
3: {id: 9, category_id: 1, title: "New2", brand: "New2", serial_number: "2165412315864",…}
Im try to use this code
categories: {
handler(categories) {
console.log('categories: ', categories[title]); //Debug
},
deep: true
}
If you want an array with just the titles you can use Array.map and pick the parts your interested in:
const arr = [{
id: 6,
category_id: 2,
title: "Test",
brand: "Test",
serial_number: "2165412315864"
},
{
id: 7,
category_id: 3,
title: "Test2",
brand: "Test2",
serial_number: "2165412315864"
},
{
id: 8,
category_id: 5,
title: "New",
brand: "New",
serial_number: "2165412315864"
},
{
id: 9,
category_id: 1,
title: "New2",
brand: "New2",
serial_number: "2165412315864"
}
];
const titles = arr.map(({ title }) => title);
console.log(titles);
The categories variable is actually an array here, so you can not use
categories['title']
// Or,
categories.title
here. To get all title property for each category inside the categories array you can use array .map() method like:
categories: {
handler(categories) {
const arr = categories.map(c => c.title)
console.log('titles: ', arr); //Debug
},
deep: true
}
Related
I have an object that looks like this
category_1: [
[
id: 1,
name: 'Product 1',
tags: []
],
[
id: 2,
name: 'Product 2',
tags: []
]
],
category_2: [
[
id: 3,
name: 'Product 3',
tags: []
],
[
id: 4,
name: 'Product 4',
tags: ['blue']
],
[
id: 5,
name: 'Product 5',
tags: []
],
[
id: 6,
name: 'Product 6',
tags: ['blue']
]
]
and what I'm trying to do is grab everything in my category, for example category_2 and grab only the items that has blue in the tags.
This issue I'm having is that I get the first item and it just loops a couple of times with just that item.
Here is my code
getCategories(){
Object.keys(categories).forEach(category => {
if(category === 'category_2'){
categories[category].forEach(c => {
if(c.tags.includes('blue') === true){
this.categorydata.push(c)
}
});
}
})
}
First of all are you sure you want categories to be arrays of arrays? If you want items of categories to be objects instead of arrays than you are using the wrong notation. If you want your category to be consisted of objects and not arrays, change your code to this:
category_1: [
{ id: 1, name: "Product 1", tags: [] },
{ id: 2, name: "Product 2", tags: [] },
],
category_2: [
{ id: 3, name: "Product 3", tags: [] },
{ id: 4, name: "Product 4", tags: ["blue"] },
{ id: 5, name: "Product 5", tags: [] },
{ id: 6, name: "Product 6", tags: ["blue"] },
],
With that out of the way, you can do what you want using filter function.
Your code should look like this:
getCategories(categoryName, wantedTag){
return categories[categoryName].filter(item => item.tags.includes(wantedTag));
}
I'm trying to count how many hr_checked = false by specific user on a nested array inside an array in an Vue.js. Here's a snippet of array code:
userlistes: [
{
id: 2,
username: "Larry",
department_id: 3,
department: {
department_name: "IT",
id: 3,
},
worklists: [
{
id: 278,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 2,
description: "A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 277,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 3,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
{
id: 4,
username: "Tom",
department_id: 2,
department: {
department_name: "Business",
id: 2,
},
worklists: [
{
id: 259,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 6.5,
description:
"A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 260,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 0.5,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
],
And i tried to used Vue computed property to implement this:
computed: {
countCheck() {
return this.userlistes.filter((userliste) => {
return userliste.workhours.reduce((sum, workhour) => {
if (workhour.hr_checked === false) {
sum++;
}
return sum;
}, 0);
});
}
I want to get the count of the values inside the nested array's 'hr_checked'.
the returning result should be like:
Larry: unchecked 2
Tom: unchecked 2
Is there any way to do this in Vue.js? or i'm use wrong function??
Try to map the wrapping array then reduce the nested one :
return this.userlistes.map((item)=>({username:item.username,
unchecked :item.worklists.reduce((sum, workhour) => {
if (workhour.hr_checked === false) {
sum++;
}
return sum;
}, 0)}))
let userlistes = [{
id: 2,
username: "Larry",
department_id: 3,
department: {
department_name: "IT",
id: 3,
},
worklists: [{
id: 278,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 2,
description: "A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 277,
user_id: 2,
task_id: 1,
date: "2021-07-30",
hour: 3,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
{
id: 4,
username: "Tom",
department_id: 2,
department: {
department_name: "Business",
id: 2,
},
worklists: [{
id: 259,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 6.5,
description: "A",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task A",
},
hr_checked: false,
},
{
id: 260,
user_id: 4,
task_id: 7,
date: "2021-07-27",
hour: 0.5,
description: "B",
is_overtime: false,
overtime_hour: 0,
task: {
taskname: "Task B",
},
hr_checked: false,
},
],
},
]
let mapped = userlistes.map((item) => ({
username: item.username,
unchecked: item.worklists.reduce((sum, workhour) => {
if (workhour.hr_checked === false) {
sum++;
}
return sum;
}, 0)
}))
console.log(mapped)
Here is another solution:
link to codesandbox example
Code in computed props:
computed: {
getHRByUser() {
let res = [];
let reducer = (sum, workitem) => {
if (workitem.hr_checked === false) {
sum++;
}
return sum;
};
for (const i in this.userlistes) {
let inactiveHRCount = this.userlistes[i].worklists.reduce(reducer, 0);
res.push({
username: this.userlistes[i].username,
inactiveHRCount: inactiveHRCount,
});
}
return res;
},
}
But Boussadjra Brahim proposed a bit more elegant solution in this case.
computed is fine as your data are dynamic and the function would run everytime the data changes. I would use the above example
countCheck() {
let count = 0
this.userlistes.filter((userliste) => {
if (userliste.workhours && userliste.workhours.hr_checked) {
count++
}
})
return count
}
how can i do something like that in React-Native:
data = [
{id:1,title:'Action',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
{id:2,title:'Horror',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
]
Every time the query string is updated, look for the game within the category.
Returns only the categories that contain a game with the searched characters.
Thank you! :D
I don't know if I understand your question correctly. This is my solution.
If you query for "Game5" you will get whole object that contains query
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game4" },
{ id: 2, title: "Game5" },
{ id: 3, title: "Game6" },
],
},
];
const query = "Game5";
const result = data.find((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
You can use 'filter' instead of 'find' and result will be an array.
This is example of filter version. I add one more category so you can see how it filter
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game2";
const result = data.filter((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
And you might want to look at life cycle componentDidUpdate if you write class component, but if you write function component you might want to use useEffect
This is official react hook explaination
EDIT: from your comment you might want something like this
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game5";
let result = null;
data.forEach((category) => {
const game = category.games.filter((g) => g.title === query);
if (game.length) result = { ...category, games: game };
});
console.log(result);
I know that hovering on a node can show the title property. But can I also show other properties? Also, how about doing the same for edges?
Thanks,
Bob
You can use the title property on edges as well.
and you will need to generate the title attribute before binding it to the network.
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1", title: 'generate text before binding the sets' },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" }
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3, title: 'from 1 to 3' },
{ from: 1, to: 2, title: 'from one 2 two' },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 }
]);
see this example
This should be an easy one but I'm missing something. I have an MVC application that returns JSON data using this controller method:
public ActionResult GetVenues()
{
ActionResult ar = Json(_VenueRepository.GetData(), JsonRequestBehavior.AllowGet);
return ar;
}
Nothing fancy here. I'm displaying a Kendo treeview on my view using the following code:
var venuetree = function () {
$("#venuetreeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{ id: 0, text: "Venues", items: [{ id: 1, text: "Venue 1", items: [{ id: 5, text: "Venue 2" }] }, { id: 2, text: "Venue 3", items: [{ id: 14, text: "Venue 4" }] }, { id: 3, text: "Venue 5", items: [{ id: 38, text: "Venue 6" }, { id: 39, text: "Venue 7" }, { id: 25, text: "Venue 8" }, { id: 26, text: "Venue 9" }, { id: 27, text: "Venue 10" }, { id: 28, text: "Venue 11" }] }, { id: 30, text: "Venue 12" }, { id: 40, text: "Venue 13", items: [{ id: 41, text: "Venue 14" }] }, { id: 4, text: "Venue 15", items: [{ id: 29, text: "Venue 16" }] }, { id: 31, text: "Venue 17" }, { id: 32, text: "Venue 18" }] }]
//dataSource: new kendo.data.HierarchicalDataSource({
// transport: {
// read: {
// url: "DataManager/GetVenues",
// dataType: "json",
// contentType: "application/json"
// }
// },
// pageSize: 100,
// requestEnd: function (e) {
// $("#wait").hide();
// },
//})
}).data("kendoTreeView");
};
The hard-coded JSON here renders just fine. I obtained this JSON directly from the ActionResult object in the controller method.
However, when I uncomment the code that returns the HierarchicalDataSource (while commenting out the hard-coded version, of course) The treeview displays a Loading message with a wait animation. Note: same problem using DataSource as HierarchicalDataSource.
Any ideas why its acting this way?
Thanks
Carl
i use this
var dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: foo,
datatype: "json",
contentType: "application/json"
}
},
schema: {
model: {
children: "items",
id: "id"
},
data: function(data) {
var dataArray = eval(data);
return dataArray;
}
}
});
I think eval(data) is the solution.
I tried many things and after using eval it works :)