All values in array bound to same value - angularjs

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.

Related

How to manipulate the object inside the array using javascript?

var arr = [
{ id: 1, name: 'Ahmed Malick', school: 'TEWGS' },
{ id: 2, name: 'Tehmeed Anwar', school: 'DGS' },
{ id: 3, name: 'Azhar Yameen', school: 'DGS' }
]
I want this output:
The student name is his id is and he studies in
Can you please show me what kind of output you expect. Then i will try to solve it.
I'm not sure if this is what you want
var arr = [
{ id: 1, name: "Ahmed Malick", school: "TEWGS" },
{ id: 2, name: "Tehmeed Anwar", school: "DGS" },
{ id: 3, name: "Azhar Yameen", school: "DGS" },
];
arr.map((student) => {
return `Name: ${student.name}, id: ${student.id}, he studies in: ${student.school}`;
}).forEach((output) => {
console.log(output);
});
If you want it in the DOM do this
let html = arr.map((student) => {
return `<p><strong>Name</strong>: ${student.name}, <strong>id</strong>: ${student.id},<strong> he studies in</strong> ${student.school}</p>`;
}).join("")
document.createElement("div").innerHTML = html
Try thatGood luck

Angular 2+ compare differences between 2 arrays

The arrays I have
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
I would like to find the online and offline ones by comparing the two series
I want to do:
const userLists = [
{ id: 1, name: "field 1", online: true },
{ id: 2, name: "field 2", online: false },
{ id: 3, name: "field 3", online: true },
{ id: 4, name: "field 4", online: false },
];
Using Array.map and Array.some
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
var retVal=users.map(u=>{
var isOnline=onlineUsers.some(ou=> ou.id==u.id);//this will check if onlineUsers have some record with given userid
return {...u,online:isOnline}
})
console.log(retVal)
You can just traverse through the user list and you can find out the onlineuser using find and just push it in the onlineuserList.
const users = [
{ id: 1, name: "field 1" },
{ id: 2, name: "field 2" },
{ id: 3, name: "field 3" },
{ id: 4, name: "field 4" },
];
const onlineUsers = [
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
];
const userLists = [];
users.forEach(user => {
if(onlineUsers.find(q => q.id == user.id)){
userLists.push({
id: user.id,
name: user.name,
online: "true"
})
}
else{
userLists.push({
id: user.id,
name: user.name,
online: "false"
})
}
})
console.log(userLists);
a bit faster approach using Array.indexOf() and JSON.strigify()
const onlineUsers = JSON.stringify([
{ id: 1, name: "field 1" },
{ id: 3, name: "field 3" }
]);
const userList = users.map(user =>
({
...user,
online: onlineUsers.indexOf(JSON.stringify(user)) > -1
})
);
OR if you neither want to change original onlineUsers array nor declare another variable:
const userList = users.map(user =>
({ ...user, online: JSON.stringify(onlineUsers).indexOf(JSON.stringify(user)) > -1 })
);

How to filter array based on id in angularJS

i have multiple data for one id , i want filter my data like this
$scope.mpArray =[
{ Id: 1, Name: Madhu, Address: Upal },
{ Id: 1, Name: Chandu, Address: Upal },
{ Id: 2, Name: Srinu, Address: Kphb },
{ Id: 2, Name: Vijay, Address: kphb },
{ Id: 3, Name: Ajay, Address: Banglore },
{ Id: 3, Name: Narsi, Address: Banglore },
{ Id: 3, Name: Peter, Address: Banglore },
];
i want to filter my array like this
var FilterArray = [
{ Id: 1,Madhu, Chandu},
{ Id: 2, Srinu, Vijay},
{ Id: 3, Ajay, Narsi, Peter},
];
At first you need to change your FilterArray to
[
{
"Id": 1,
"Name": [
"Madhu",
"Chandu"
]
},
{
"Id": 2,
"Name": [
"Srinu",
"Vijay"
]
},
{
"Id": 3,
"Name": [
"Ajay",
"Narsi",
"Peter"
]
}
]
Notice that name is an array. The FilterArray of your question
var FilterArray = [
{ Id: 1,Madhu, Chandu},
{ Id: 2, Srinu, Vijay},
{ Id: 3, Ajay, Narsi, Peter},
];
Do not contain a valid JSON object inside the array so you need to change the structure to the one where add a new key Name in the JSON object of FilterArray as like the first structure above. Then the below code works great.
$(document).ready(function(){
var myArray =[
{ Id: 1, Name: "Madhu", Address: "Upal" },
{ Id: 1, Name: "Chandu", Address: "Upal" },
{ Id: 2, Name: "Srinu", Address: "Kphb" },
{ Id: 2, Name: "Vijay", Address: "kphb" },
{ Id: 3, Name: "Ajay", Address: "Banglore" },
{ Id: 3, Name: "Narsi", Address: "Banglore" },
{ Id: 3, Name: "Peter", Address: "Banglore" },
];
var FilterArray = [];
var matched;
for(var i=0;i<myArray.length; i++){
matched = false;
var myArrayId = myArray[i].Id;
for(var j=0; j<FilterArray.length; j++){
var FilterArrayId = FilterArray[j].Id;
if(myArrayId === FilterArrayId){
matched = true;
FilterArray[j].Name.push(myArray[i].Name);
// no need to loop further
break;
}
}
if(!matched){
var obj = {
'Id' : myArrayId,
'Name' : [myArray[i].Name],
}
FilterArray.push(obj);
}
}
console.log(FilterArray);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
try this
var mpArray =[
{ Id: 1, Name: 'Madhu', Address: 'Upal' },
{ Id: 1, Name: 'Chandu', Address: 'Upal' },
{ Id: 2, Name: 'Srinu', Address: 'Kphb' },
{ Id: 2, Name: 'Vijay', Address: 'kphb' },
{ Id: 3, Name: 'Ajay', Address: 'Banglore' },
{ Id: 3, Name: 'Narsi', Address: 'Banglore' },
{ Id: 3, Name: 'Peter', Address: 'Banglore' },
];
var filterObject = {};
mpArray.forEach(function (item) {
if (!filterObject[item.Id]) {
filterObject[item.Id] = [];
}
filterObject[item.Id].push(item.Name);
});
console.log(filterObject);
$scope.mpArray =[
{ Id: 1, Name: 'Madhu', Address: 'Upal' },
{ Id: 1, Name: 'Chandu', Address: 'Upal' },
{ Id: 2, Name: 'Srinu', Address: 'Kphb' },
{ Id: 2, Name: 'Vijay', Address: 'kphb' },
{ Id: 3, Name: 'Ajay', Address: 'Banglore' },
{ Id: 3, Name: 'Narsi', Address: 'Banglore' },
{ Id: 3, Name: 'Peter', Address: 'Banglore' },
];
var FilterArray = [];
var FilteredArrayIds=[];
$scope.mpArray.forEach(
function(detailObj) {
if(FilteredArrayIds.indexOf(detailObj.Id)==-1)
return FilteredArrayIds.push(detailObj.Id);
});
for(var i=0; i<FilteredArrayIds.length;i++)
{
var result = $scope.mpArray.filter(function( obj ) {
return obj.Id == FilteredArrayIds[i];
});
var rsltNames = result.map(function(obj){
return obj.Name;
})
var filteredObj ={
id:FilteredArrayIds[i]+',' +rsltNames.join()
}
FilterArray.push(filteredObj);
}
console.log(filteredObj)

jQuery select array from data attributes

I'm trying to give an array to my makeSlider function.
The HTML5 Data attribute selects the correct array. Unfortunately, it is not interpreted as an array.
It does not work:
 values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
Is working:
makeSlider(sliderID, targetID, dataMehrfachauswahlmatrixLeft);
HTML:
<div class="noui-slider" id="slider-1" data-slider="dataMehrfachauswahlmatrixLeft">
<!-- slider here -->
</div>
<div class="hidden-md-up">
<!-- Store selected value -->
<input class="form-control slider-value" id="input-target-1">
</div>
JS (script.js):
$(document).ready(function() {
// slider array
// Matrix 1
var dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
var dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
...
}
// init slider
$(".noui-slider").each(function(index) {
var sliderID = $(this).attr("id"),
targetID = $(this).next().find(".slider-value").attr("id");
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
});
});
Problem with current implementation it that the variable value doesn't refers to the defined array. Its a string literal having value i.e. dataMehrfachauswahlmatrixLeft, dataMehrfachauswahlmatrixRight
Define the array in window or any other object scope.
// Matrix 1
window.dataMehrfachauswahlmatrixLeft = [...];
// Matrix 2
window.dataMehrfachauswahlmatrixRight = [...]
Then use Bracket notation to access object dynamic properties.
values = $(this).data("slider");
makeSlider(sliderID, targetID, window[values]);
An example here
$(document).ready(function() {
var myOBj = {};
// slider array
// Matrix 1
myOBj.dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
myOBj.dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
console.log(values)
}
$(".noui-slider").on('click', function() {
var values = $(this).data("slider");
makeSlider(1, 2, myOBj[values]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixLeft'>1</div>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixRight'>2</div>

ng-repeat filter not filtering out null values

The JSON :
$scope.results=[
{
id: 1,
name: null,
class: "First"
},
{
id: 2,
name: John,
class: "First"
},
{
id: 3,
name: Mary,
class: "Second"
},
{
id: 4,
name: null,
class: "Third"
}
]
HTML:
<div class="col-md-6 form-group" data-ng-repeat="item in results| filter:{name:'!null'}">{{item.name}}</div>
I wanted to filter out the data that has name with value null.What's wrong with my code?
your json formate is not proper try this
plunker link http://plnkr.co/edit/H94f6XhyyhbvJ3F25NoA?p=preview
$scope.results=[
{
id: 1,
name: null,
class: "First"
},
{
id: 2,
name: "John",
class: "First"
},
{
id: 3,
name: "Mary",
class: "Second"
},
{
id: 4,
name: null,
class: "Third"
}
];
Solved it by adding this piece of code:
<div class="col-md-6 form-group" data-ng-repeat="item in results| filter:{name:'!!'}">{{item.name}}</div>

Resources