Hello Everybody I've tried to create a select input field where i fill the options with a label from a dataset i created, which looks like this:
visitsList: [
{
label: '2017',
values: [
{ id: 1, title: "January", value: 20000 },
{ id: 2, title: "February", value: 30000 },
{id: 3,title: "March", value: 40000},
{ id: 4, title: "April", value: 40000},
{id: 5,title: "May",value: 50000},
{ id: 6,title: "June",value: 60000},
{id: 7, title: "July",value: 20000},
{ id: 8,title: "August", value: 70000},
{ id: 9,title: "September",value: 70000},
{id: 10, title: "October",value: 80000},
{id: 11,title: "November",value: 90000},
{id: 12,title: "December",value: 100000}
]},
{
label: '2018',
values: [
{ id: 1, title: "January", value: 20000 },
{ id: 2, title: "February", value: 30000 },
{id: 3,title: "March", value: 40000},
{ id: 4, title: "April", value: 40000},
{id: 5,title: "May",value: 50000},
{ id: 6,title: "June",value: 60000},
{id: 7, title: "July",value: 20000},
{ id: 8,title: "August", value: 70000},
{ id: 9,title: "September",value: 70000},
{id: 10, title: "October",value: 80000},
{id: 11,title: "November",value: 90000},
{id: 12,title: "December",value: 100000}
]},
{
label: '2019',
values: [
{ id: 1, title: "January", value: 20000 },
{ id: 2, title: "February", value: 30000 },
{id: 3,title: "March", value: 40000},
{ id: 4, title: "April", value: 40000},
{id: 5,title: "May",value: 50000},
{ id: 6,title: "June",value: 60000},
{id: 7, title: "July",value: 20000},
{ id: 8,title: "August", value: 70000},
{ id: 9,title: "September",value: 70000},
{id: 10, title: "October",value: 80000},
{id: 11,title: "November",value: 90000},
{id: 12,title: "December",value: 100000}
]
}
],
selectedYear: [],
The goal is if I select an option with the year it should show the values.
The template looks like this
<select v-model="widget.selectedYear">
<option v-for="year in widget.visitsList" v-bind:key="year.values">
{{year.label}}
</option>
</select>
<!--v-select :option="widget.visitsList.label" ></v-select-->
<table class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Views</th>
</tr>
</thead>
<tbody>
<tr v-for="year in widget.visitsList" v-bind:key="year.label" ><!--v-if="year.label == selectedYear"-->
<th scope="row">{{visit.title}}</th>
<td>{{visit.value}}</td>
</div>
</tr>
</tbody>
</table>
I tried so many things, but somehow i didn't find the right solution. Maybe there is no solution.
Thanks for the help
Regards Maxim
I think you should use computed properties for this, bind your first selector to a data property then you can have a computed property watch that data property and return the values for the second select based on the changes in the data property.
Related
I have an array called data. How do i extract sub_data? Just need the sub_data part for each object.
const data = [
{
id: 1,
title: 'Logo'
sub_data: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands'
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
Example output will get two outputs because there is 2 objects:
const subData = [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
const subData = [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
Not very sure how to use the map function just to get sub_data in the correct structure
You can use flatMap to get sub_data in one array
const data = [
{
id: 1,
title: 'Logo',
sub_data: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands',
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
const result = data.flatMap(item => item.sub_data)
console.log(result)
If you want an array with the sub_data objects you can just map the original array:
const data = [
{
id: 1,
title: 'Logo',
'sub_data'
: [
{
id: 2,
title: 'Company Logo'
},
{
id: 3,
title: 'Website Logo'
},
]
},
{
id: 2,
title: 'Brands',
sub_data: [
{
id: 25,
title: 'Company Brands'
},
{
id: 3,
title: 'Website Brands'
},
]
}
]
const mappedData = data.flatMap(obj => obj.sub_data)
console.log(mappedData)
Another solution would be to use the .forEach function of javascript.
const subData = [];
data.forEach(item => subData.push(...item.sub_data))
The problem is that I have a list of people and their city id. I want to get the city name based on their id from another list by a function.
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>City</th>
</tr>
<tr ng-repeat="item in samples">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td>{{getCity(item.city)}}</td>
</tr>
</table>
and the controller:
$scope.samples = [
{id: 1, name: "alex", type: "Average", city: 12},
{id: 2, name: "Alex", type: "Average", city: 12},
{id: 3, name: "Mia", type: "Medium", city: 13},
{id: 4, name: "Sasha", type: "Top", city: 14},
{id: 5, name: "Eric", type: "Top", city: 12},
{id: 6, name: "Taz", type: "Average", city: 14},
{id: 7, name: "Normai", type: "Low", city: 13},
{id: 8, name: "Jim", type: "Average", city: 11}];
$scope.city = [
{id: 11, name: "Dallas"},
{id: 12, name: "Los Angeles"},
{id: 13, name: "New York"},
{id: 14, name: "Washington"}
];
$scope.getCity = function(name) {
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
return $scope.city_name;
});
}
Here is a Fiddle for more details.
you are return value at wrong place. I just update the jsfiddle you can check here.
Here is the changes of the code.
$scope.getCity = function(name) {
$scope.city_name = "";
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
});
return $scope.city_name;
}
}]);
Try this function
$scope.getCity = function(id) {
var city = $scope.city.filter(function(c){ return angular.equals(c.id, id); })[0];
return city.name;
}
I am creating a pizza app with React.js and would like to display pizza options in a table. I would like to develop my table using like this table, rather than the way i am doing it in choices.js.
Choices.js
return (
<div className="page-wrap">
<table>
<thead>
<tr>
<th>Pizza Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td key={index}>
<a href onClick={this.handleChoice.bind(this, pizza)}>
{pizza.name}</a></td>
</tr>
<tr>
<td>${pizza.price}</td>
</tr>
</tbody>
</table>
</div>
)
});
Options.js
var pizzas = [
{
name: 'Cheese Pizza',
cheese: 'Mozzarella',
toppings: [],
price: 5
},
{
name: 'Papas Special',
cheese: 'Parmesan',
toppings: ['Spinach', 'Lobster', 'Hot Oil'],
price: 50
},
{
name: 'Wild West',
cheese: 'Spicy Mozzarella',
toppings: ['Red Onions', 'Texas Chilli', 'Grilled Chicken'],
price: 25
},
{
name: 'California Pizza',
cheese: 'Mozzarella',
toppings: ['Spinach', 'Guacamole', 'Cherry Tomato'],
price: 25
},
{
name: 'Buffalo Chicken Pizza',
cheese: 'Spicy Blue Cheese',
toppings: ['Red Onions', 'Texas Chilli'],
price: 25
},
{
name: 'Jerk Chicken Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Jerk Sauce'],
price: 25
},
{
name: 'Salad Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Lettuce', 'Tomato'],
price: 25
}
];
Are you tring to do this? http://jsfiddle.net/dahdx6eu/337/
var cols = [
{ key: 'Name', label: 'Name' },
{ key: 'Cheese', label: 'Cheese' },
{ key: 'Toppings', label: 'Toppings' },
{ key: 'Price', label: 'Price' },
];
var data = [
{
id: 1,
name: 'Cheese Pizza',
cheese: 'Mozzarella',
toppings: [],
price: 5
},
{
id: 2,
name: 'Papas Special',
cheese: 'Parmesan',
toppings: ['Spinach', 'Lobster', 'Hot Oil'],
price: 50
},
{
id: 3,
name: 'Wild West',
cheese: 'Spicy Mozzarella',
toppings: ['Red Onions', 'Texas Chilli', 'Grilled Chicken'],
price: 25
},
{
id: 4,
name: 'California Pizza',
cheese: 'Mozzarella',
toppings: ['Spinach', 'Guacamole', 'Cherry Tomato'],
price: 25
},
{
id: 5,
name: 'Buffalo Chicken Pizza',
cheese: 'Spicy Blue Cheese',
toppings: ['Red Onions', 'Texas Chilli'],
price: 25
},
{
id: 6,
name: 'Jerk Chicken Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Jerk Sauce'],
price: 25
},
{
id: 7,
name: 'Salad Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Lettuce', 'Tomato'],
price: 25
}
]
var Table = React.createClass({
render: function() {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<table>
<thead> {headerComponents} </thead>
<tbody> {rowComponents} </tbody>
</table>
);
},
generateHeaders: function() {
var cols = this.props.cols; // [{key, label}]
// generate our header (th) cell components
return cols.map(function(colData) {
return <th key={colData.key}> {colData.label} </th>;
});
},
generateRows: function() {
var cols = this.props.cols, // [{key, label}]
data = this.props.data;
return data.map(function(item) {
// handle the column data within each row
console.log(item)
return (<tr key={item.id}><td>{item.name}</td><td>{item.cheese}</td><td>{item.toppings} </td><td>{item.price}</td></tr>);
});
}
});
I hope someone can help me.
For my current project in angular 1.3 I'm using this list:
$scope.myList = [{
id: "obj1",
content: [{
id: 1,
name: 'attr 1'
}, {
id: 2,
name: 'attr 2'
}, {
id: 3,
name: 'attr 3'
}]
}, {
id: "obj2",
content: [{
id: 4,
name: 'attr 4'
}, {
id: 5,
name: 'attr 5'
}, {
id: 6,
name: 'attr 6'
}]
}, {
id: "obj3",
content: [{
id: 7,
name: 'attr 7'
}, {
id: 8,
name: 'attr 8'
}, {
id: 9,
name: 'attr 9'
}]
}];
I would like to get the object which has the id X in the content array.
I used this ng-repeat:
<ul>
<li ng-repeat="item in myList | filter: {content: [{id:1}]}">
{{item}}
</li>
</ul>
When I use id:1, id:4 or id:7 it works, but not for the other ids...
Has anyone any ideas?
Edit
I FINALLY found out what caused the problem, I was using angular 1.3.0. After upgrading to 1.3.11 it worked!!
You can filter based on nested properties like so:
<li ng-repeat="item in myList | filter: {content: {id: '1'}}">
{{item}}
</li>
It's important to note that the "object" (that has the id X) you'll get will be at the item level.
I'm trying to update values inside $scope.match.teams[0] with vaules for the players' names, but when I input in a single field, it is bound to every players' name for that team.
Controller:
$scope.match = {
teams: [
{
id: 0,
name: "",
players: [
{ id: 1, name: "" },
{ id: 2, name: "" },
{ id: 3, name: "" },
{ id: 4, name: "" },
{ id: 5, name: "" },
{ id: 6, name: "" },
{ id: 7, name: "" },
{ id: 8, name: "" },
{ id: 9, name: "" },
{ id: 10, name: "" },
{ id: 11, name: "" },
]
},
{
id: 1,
name: "",
players: [
{ id: 1, name: "" },
{ id: 2, name: "" },
{ id: 3, name: "" },
{ id: 4, name: "" },
{ id: 5, name: "" },
{ id: 6, name: "" },
{ id: 7, name: "" },
{ id: 8, name: "" },
{ id: 9, name: "" },
{ id: 10, name: "" },
{ id: 11, name: "" },
]
}
]
};
$scope.battingFirstSelected = function(){
switch ($scope.battingFirst.id) {
case 0:
$scope.battingSecond = $scope.match.teams[1];
case 1:
$scope.battingSecond = $scope.match.teams[0];
}
};
HTML:
Team batting first:
<select
ng-change="battingFirstSelected()"
ng-model="battingFirst"
ng-options="team.name for team in match.teams">
</select>
<div ng-repeat="player in battingFirst.players">
<input
class="form-control"
ng-model="match.teams[battingFirst.id].player.name"
value="" />
</div>
<div ng-repeat="player in match.teams[battingFirst.id].players">
{{ match.teams[battingFirst.id].player.name }}
</div>
The selection of the team works fine, it's just assigning the names that's the problem here.
The output of {{ match.teams[battingFirst.id] }} shows that I'm creating a new team every time I fill in one of the inputs, with a { player: {"name":"sdf"} } object attached to it.
You just need to try:
ng-model="player.name"
Your battingFirst is already a selected team from the above select. When you bind to players in this battingFirst, you bind correctly to players of the selected team.
<div ng-repeat="player in battingFirst.players">
<input
class="form-control"
ng-model="player.name"
value="" />
</div>
The problem you have is because ng-repeat creates child scopes. Therefore match.teams inside your ng-repeat is not the same as the match.teams of your parent scope.