I have 2 arrays stored in arr1 and arr2
var arr1 = [
{
"status": 4,
"id": 1
},
{
"status": 2,
"id": 2
},
{
"status": 1,
"id": 3
}];
var arr2 = [{
"status": 4,
"id": 1
},
{
"status": 2,
"id": 2
},
{
"status": 4,
"id": 3
}];
Am using angular.equals(arr1, arr2) to check 2 arrays are same but when the status changes in arr2, how can i fetch the respective id from arr2.
This will give you the array which contains the ids of the elements with different status value.
var elementsChanged = arr1.map((val, idx) => {
if (val.status !== arr2[idx].status)
return arr2[idx].id
})
You need to first put arr2 in $scope and then set $watch on your data to detect the exact id change.
$scope.$watch('arr2', function(newValue, oldValue){.//iterate and detect your id change..}, true);
Demo for watcher
Demo Updated with #korte map suggestion.
Related
I have data from an API that is like:
[
{
"id": 1,
"name": "eventName1",
"related_events": [
2,
3
]
},
{
"id": 2,
"name": "eventName2",
"related_events": [
1,
3
]
},
{
"id": 3,
"name": "eventName3",
"related_events": [
1,
2,
4
]
}
]
Each element of the related_events array links to an id element. So, if the related_events has 2 and 3 then that means I have to call id 2 and 3.
If I want to get the name that corresponds to the related_events ids, how would I code it?
Example, if the related_events has 2 and 3 then I want to display the names "eventName2" and "eventName3".
You can search your data for the related_event ids by iterating through or by using Array.find function.
Something like this:
const testData = [
{
"id": 1,
"name": "eventName1",
"related_events": [
2,
3
]
},
{
"id": 2,
"name": "eventName2",
"related_events": [
1,
3
]
},
{
"id": 3,
"name": "eventName3",
"related_events": [
1,
2,
4
]
}
];
// the object to test from the data
const testObject = testData[0];
//we iterate over every id of related_events
testObject.related_events.forEach(targetId => {
//we search in the data for a matching element that corresponds to the related_event id
const targetElement = testData.find(element => {return element.id === targetId});
//check if that element actually exists, just to be sure
if (!!targetElement) {
console.log(targetElement.name);
}
else {
console.log("no matching object found");
}
});
There is really no difference when using React to just using basic javascript, as the logic is the same.
I have the following JSON Array data from which I want to print Charlie. How to do it?
[ [ {
"ID": 1,
"Name" :"David"
},{
"ID": 2,
"Name" :"Antony"
}],[{
"ID": 1,
"Name" :"Bob"
},{
"ID": 2,
"Name" :"Charlie"
} ] ]
you are using {PostData.map((group, index)=>{ return <p>{group.Name}</p>, since you are using map here PostData[0].Name will throw error inside map(), because you are iterating array with map().
Since you only need first item, you can simply use <p>PostData[0].Name</p>
var data = [{
"ID": 1,
"Name" :"David",
}, {
"ID": 2,
"Name" :"Antony",
}];
console.log(data[0].Name)
var response= [{
"ID": 1,
"Name" :"David",
}, {
"ID": 2,
"Name" :"Antony",
}];
console.log(response[0].Name) will give you first element of Array and return data with Key 'Name'.
I am using Typescript in an Angular/Ionic project. I have an array of users that contain an array of skills. I have to filter users based on their online status as well as skills.
[
{
"id": 1,
"name": "Vikram Shah",
"online_status": "Online",
"skills": [{
"id": 2,
"title": "CSS"
},
{
"id": 3,
"title": "JavaScript"
},
{
"id": 4,
"title": "Python"
}
]
},
{
"id": 1,
"name": "Abhay Singh",
"online_status": "Online",
"skills": [{
"id": 1,
"title": "HTML"
},
{
"id": 2,
"title": "CSS"
},
{
"id": 3,
"title": "JavaScript"
},
{
"id": 4,
"title": "Python"
}
]
},
{
"id": 1,
"name": "Test Oberoi",
"online_status": "Online",
"skills": [{
"id": 1,
"title": "HTML"
},
{
"id": 2,
"title": "CSS"
},
{
"id": 3,
"title": "JavaScript"
},
{
"id": 4,
"title": "Python"
}
]
}
]
This is how all skills look like
this.skill_types = [
{"id":8,"title":"Cleaner", checked:false},
{"id":7,"title":"Painter", checked:false},
{"id":6,"title":"Plumber", checked:false},
{"id":5,"title":"Carpenter", checked:false},
{"id":4,"title":"Advisor", checked:false},
{"id":3,"title":"Team Leader", checked:false},
{"id":2,"title":"Management", checked:false},
{"id":1,"title":"Administrator", checked:false}
];
This array contains the IDs of skills that I want to filter
filterArr = [1, 3, 6];
This solution is almost working as expected. It is filtering well based on two criteria together.But not sure how to add condition for second filtering. The second filter should apply only if filterArr is not empty.
return this.items = this.items.filter((thisUser) => {
return thisUser.online_status.toLowerCase().indexOf(onlineStatus.toLowerCase()) > -1 &&
thisUser.skills.some(c => this.filterArr.includes(c.id))
});
The issue I am facing with code above is When there is no skill selected in the filter criteria, I would like to display all users. But it is not working that way. The logic here is to not apply any filter when the size of selected skills (filter condition) is greater than zero. So I tried this way....which looks similar to the way above...but this makes everything worse.
let filteredByStatus = [];
filteredByStatus = this.items.filter((thisUser) => {
return thisUser.online_status.toLowerCase().indexOf(onlineStatus.toLowerCase()) > -1
});
//Condition can be applied if filtering is separated
let filteredBySkills = [];
filteredBySkills = this.items.filter((thisUser) => {
return thisUser.skills.some(c => this.filterArr.includes(c.id))
});
//Expecting to join results from multiple filters
return this.items = filteredByStatus.concat(filteredBySkills);
But this is not working at all. Not sure what wrong is there. I am looking for a solution that enables to join arrays of similar objects without duplicating them.
Don't think you need to join arrays for your filtering. You can use something like rxjs filter.
return from(this.items)
.pipe(
filter(user => {
return user.online_status.toLowerCase().indexOf(onlineStatus.toLowerCase()) > -1
&& user.skills.some(c => filterArr.includes(c.id));
})
);
Or if you like to split it up you can just change it to like:
return from(this.items)
.pipe(
filter(user => user.online_status.toLowerCase().indexOf(onlineStatus.toLowerCase()) > -1),
filter(user => user.skills.some(c => filterArr.includes(c.id)))
);
Stackblitz: https://stackblitz.com/edit/angular-pk3w8b
You can tweak your condition a bit and place !this.filterArr.length in your condition (in terms of OR condition AND with user status) to make your whole condition gets true so that user gets filter.
i want to convert my apiArray fetched from api to AngularJS NVD3 MultiBarChart data format.
$scope.apiArray = [{"date":"2018-07-05T05:05:39.732Z","id":2"count":1},{"date":"2018-07-05T05:05:39.732Z","id": 3,"count": 1},"date": "2018-07-06T05:05:39.732Z","id": 2,"count": 1}, {"date": "2018-07-06T05:05:39.732Z","id": 4,"count": 2}
Using Lodash library where key is my id, to ->
$scope.data = [{"key":"2", "values":[{"date": "2018-07-05T05:05:39.732Z", "count": "1"},{"date": "2018-07-06T05:05:39.732Z", "count": "1"}]},{"key":"3", "values":[{"date": "2018-07-05T05:05:39.732Z", "count": "1"}]},{"key":"4", "values":[{"date": "2018-07-06T05:05:39.732Z", "count": "2"}]}]
Is there any solution? I want to feed my apiArray to AngularJS NVD3 to create Multibar chart.
you can simply use a _.groupBy with a _.map to acheive this
_(data).groupBy('id').map((values, key) => ({key, values})).value()
First grouped by the 'id', it will return a object where keys will
be unique ids and each values will a array contains all the objects
having that id
Then map it (each key/value) to a object have key key and values,
key will contain the unique id and values will be the objects having
that id (what we get in _.groupBy against each unique id, simple use that)
var data = [{ "date": "2018-07-05T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-05T05:05:39.732Z", "id": 3, "count": 1, }, { "date": "2018-07-06T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-06T05:05:39.732Z", "id": 4, "count": 2 } ];
var res = _(data)
.groupBy('id')
.map((values, key) => ({ key, values}))
.value();
console.log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
This should help you:
var data = [{ "date": "2018-07-05T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-05T05:05:39.732Z", "id": 3, "count": 1, }, { "date": "2018-07-06T05:05:39.732Z", "id": 2, "count": 1 }, { "date": "2018-07-06T05:05:39.732Z", "id": 4, "count": 2 } ]
const result = _(data)
.groupBy(x => x.id)
.entries()
.map(x => ({ key: x[0], values: x[1]}))
.value()
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
We are using chaining then grouping by (via groupBy) the id, then using entries to get the contents in an array form and then just map to the expected object result.
Here, I am suppose to access the top level market details from the Json data on the first page which I'm able to although Im not able to access the sub level market details. Im suppose to display the sub level market names on the next page.
$scope.myData = {
"market": [{
"mid": 3,
"mname": "mark1",
"submarket": [{
"id": 20,
"name": "val1"
}, {
"id": 24,
"name": "val2",
"submarket": [{
"id": 26,
"name": "val21"
}]
}]
"market": [{
"mid": 4,
"name": "mark1.1",
"submarket": [{....
}]
}]
}, {
"mid": 6,
"mname": "mark2",
}]
};
$scope.markname = []; /*stores top level markets*/
angular.forEach($scope.myData.market, function(org) {
$scope.markname.push(org)
}) /*works fine and has the details of market (mid:3 and mid:6)*/
$scope.submark = [];
angular.forEach($scope.markname.submarket, function(sorg) {
$scope.submark.push(sorg)
}) /*doesn't store anything*/
It should be:
$scope.submark = [];
angular.forEach($scope.markname, function(sorg) {
angular.forEach(sorg.submarket, function(subsorg) {
$scope.submark.push(subsorg)
});
});
JSFiddle
$scope.markname is an array and your pushing items into it on your first forEach, however in the second your trying to access the property submarket. This doesn't exist on the markname array, it exists on each item within the array.
Ive done my example using the native forEach there's no need for angular to get involved here at all, it also hides the undefined issue, as the native is available of the array prototype it throws an exception if you try to call it of undefined, whilst angular happily accepts undefined and continues.
So a simple fix would be
markname.forEach(function(sorg) {
if (sorg.hasOwnProperty('submarket')) {
submark.push(sorg.submarket);
}
});
See fiddle: https://jsfiddle.net/0y6r0mw1/
edit: Its worth noting this will produce a multidimensional array, if this is not wanted you can concat them all together with something like:
submark.push.apply(submark, sorg.submarket);
The json data that you have shared, is improper. Please go through this demo.
HTML:
<div ng-app="app" ng-controller="test">
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.myData = {
"market": [{
"mid": 3,
"mname": "mark1",
"submarket": [{
"id": 20,
"name": "val1"
}, {
"id": 24,
"name": "val2",
"submarket": [{
"id": 26,
"name": "val21"
}]
}, {
"mid": 4,
"name": "mark1.1",
"submarket": [{
"id": 27,
"name": "val221"
}]
}]
}, {
"mid": 6,
"mname": "mark2",
}]
};
$scope.markname = []; /*stores top level markets*/
angular.forEach($scope.myData.market, function (org) {
$scope.markname.push(org)
}) /*works fine and has the details of market (mid:3 and mid:6)*/
console.log('markname', $scope.markname);
$scope.submark = [];
angular.forEach($scope.markname, function (sorg) {
angular.forEach(sorg.submarket, function (subM) {
$scope.submark.push(subM)
})
})
console.log('submark', $scope.submark);
});
function iterate(obj) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
iterate(obj[property]);
}
else {
console.log(property + " " + obj[property]);
}
}
}
}
iterate(object)