Searching tag in object Angularjs - angularjs

I have an tag array list which user enters
$scope.tags = ["INDIA","USA","JAPAN","CHINA"];
$scope.object = [ {
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "USA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "AUSTRALIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "SOUTHAFRICA"
} ]
I need to search $scope.tags i.e INDIA,USA,CHINA,JAPAN in $scope.object and return new array.
So new array object will be like
$scope.new = [ {
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "USA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
},
{
"name": "Executive",
"FirstName": "Jackey",
"LastName": "Gordon",
"Title": null,
"email": "admin#admin.com",
"place" : "INDIA"
}]

you can try something like this
$scope.newArr = [];
angular.forEach($scope.object , function(val,key) {
var exists = ($scope.tags).indexOf(val.place);
if(exists >= 0) {
$scope.newArr.push(val);
}
});
here is the working plunker

Try this, I didn't test.
$scope.newObj;
for (var i = 0; i < $scope.tags.length; i++) {
for (var j = 0; j < $scope.object.length; j++) {
if ($scope.tags[i].toLowerCase() == $scope.object[j].place.toLowerCase()) {
$scope.newObj.push($scope.object[j]);
}
}
}

Related

How to get certain keys from the array of objects and put them in state?

I am training to do requests to server with json.placeholder. The result of request is the array of objects with many keys.
For example the array of objects
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere#april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna#melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply-chains"
}
},
and so on ...
But I don't need all these keys. Only to take some of them, for example name, username and id and put it in my State.
How to do that properly?
TL;DR
response = [ { "id": 1, "name": "Leanne Graham", ...}, {...}, ...]
cleanResponse = response.map(user => return {name: user.name, contact: user.email})
Here, with .map we return an object that has two property : name and contact.
We set name to user.name and contact to user.email
Anwser
I don't know much about ReactJS, but your anwser only require basic javascript :
Array.Map
You can use .map on an array to convert its elements :
nameArray= [ "George", "Alice", "Portevent" ]
presentationArray = nameArray.map(name => "My name is " + name)
// presentationArray = [ "My name is George", "My name is Alice", "My name is Portevent" ]
nameArray.map will iterate on each element. name will be equal to "George", then "Alice" etc...
Foreach element, it will be replaced with "My name is " + name (remember, name will have each different value).
Note : .map doesn't change the initial array, it just create another array (so we save it inside presentationArray
A more advanced use of map :
numbers = [1, 2, 3]
function tenToPower(n) {
return 10 ** n
}
numbers.map(number => tenToPower) // [10, 100, 1000]
numbers.map(number => {
if (number < 3) return "Failed"
else return "Valid"
}) // ["Failed", "Failed", "Valid"]
const item = data.map((user) => {
if(user.username === 'Bret'){
setName(user.name);
setUserName(user.username);
setId(user.id)
}
})

How to display a column data in a react_table when the column data is array of object?

I am using s react table to to display a table of data
In tags column I want display both the tags present in tags array
of object like this. I did tried some ways but didn't get any
success as of yet. New to tables, so any better way to do this
will be appreciated.
code-sandbox link :
CodeSandBox
[
{
"id": 1,
"first_name": "Torie",
"last_name": "Rustman",
"email": "trustman0#amazon.co.uk",
"date_of_birth": "1979-11-16T23:04:32Z",
"age": 45,
"tags": null,
"phone": "6844103517"
},
{
"id": 2,
"first_name": "Kordula",
"last_name": "Gecks",
"email": "kgecks1#deviantart.com",
"date_of_birth": "1997-08-06T21:07:34Z",
"age": 30,
"tags": null,
"phone": "8429683893"
},
{
"id": 3,
"first_name": "Vikki",
"last_name": "Simoens",
"email": "vsimoens2#ted.com",
"date_of_birth": "2016-04-28T16:59:19Z",
"age": 48,
"tags": [
{ "id": 0, "name": "tag1" },
{ "id": 1, "name": "tag2" }
],
"phone": "8672773997"
},
{
"id": 4,
"first_name": "Burnaby",
"last_name": "Cowern",
"email": "bcowern3#forbes.com",
"date_of_birth": "2017-10-25T08:05:50Z",
"age": 54,
"tags": [
{ "id": 0, "name": "tag3" },
{ "id": 1, "name": "tag4" }
],
"phone": "4257971694"
},
{
"id": 5,
"first_name": "Teddie",
"last_name": "Traice",
"email": "ttraice4#zdnet.com",
"date_of_birth": "2015-04-20T11:45:34Z",
"age": 57,
"tags": [
{ "id": 0, "name": "tag5" },
{ "id": 1, "name": "tag6" }
],
"phone": "3932158370"
},
{
"id": 7,
"first_name": "Shayna",
"last_name": "Dimitresco",
"email": "sdimitresco6#uiuc.edu",
"date_of_birth": "1997-10-28T11:25:07Z",
"age": 21,
"tags": null,
"phone": "1216713219"
}
]
You could define the cell display function when you are defining the columns like you are doing for the date field.
{
Header: "Tags",
Footer: "Tags",
accessor: "tags",
// accessor: "tags[0].name"
Cell: ({ value }) => {
const values = value ? value.map((v) => v.name + ' ') : '';
return values;
}
}
Forked sandbox here

Angular Differences Between Two Models

I have an angular application which uses a significantly large shared model. Currently, when a user presses save the entire model is posted to a RESTful service. Ideally I would only like to post the fields that have changed. Since this is a shared model I do not have access to form validation states such as dirty/pristine etc. The idea I can think of is to have two models, the original and the modified and compare these.
Original Model
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"id": "123",
"number": "212 555-1234"
},
{
"id": "456",
"number": "646 555-4567"
},
{
"id": "789",
"number": "123 456-7890"
}
],
"children": [],
"spouse": null
}
Changed Model
{
"firstName": "Jane",
"lastName": "Smith",
"isAlive": true,
"age": 50,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"id": "123",
"number": "1234567890"
},
{
"id": "456",
"number": "646 555-4567"
},
{
"id": "789",
"number": "123 456-7890"
}
],
"children": [],
"spouse": null
}
Data Posted - This is what I need!
{
"firstName": "Jane",
"age": 50,
"phoneNumbers": [
{
"id":"123",
"number": "1234567890"
}
]
}
How can I achieve this? I need the changed fields including any fields called id!
You'll need something like this. Working Fiddle: https://jsfiddle.net/jyyyLaot/
function filter(obj1, obj2) {
var result = {};
for(key in obj1) {
if(obj2[key] != obj1[key]) result[key] = obj2[key];
if(typeof obj2[key] == 'array' && typeof obj1[key] == 'array')
result[key] = arguments.callee(obj1[key], obj2[key]);
if(typeof obj2[key] == 'object' && typeof obj1[key] == 'object')
result[key] = arguments.callee(obj1[key], obj2[key]);
}
return result;
}

Get Value After Payment

I have the following object. How do I get the email value from it?
{
"payment_method": "paypal",
"payer_info": {
"email": "example#domain.com",
"first_name": "example",
"last_name": "xxx",
"payer_id": "12313213",
"shipping_address": {
"recipient_name": "Example",
"id": "5435345",
"line1": "1 SS ",
"city": "San Jose",
"state": "CA",
"postal_code": "95131",
"country_code": "US"
},
"phone": "4547567",
"country_code": "US"
}
}

How to read/repeat JSON data from AngularJS

I am pretty new to AngularJS so my apologies in that there are probably several concepts I am missing.
I'd like to take the following multi-level JSON string and parse/repeat the LastName elements.
Here is my attempt to do so with HTML / Javascript.
HTML
<!doctype html>
<html ng-app="nameApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="jsonGrab">
<hr>
<h1># of Records {{output}}</h1>
<ul>
<li data-ng-repeat="attribute in output.attributess"> {{attributes.LastName}}</li>
</ul>
</div>
</body>
</html>
Javascript
var nameApp = angular.module('nameApp',[]);
nameApp.controller('jsonGrab', function ($scope) {
// Comment
$scope.output = '[{
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXuAAP"
},
"Email": "rose#edge.com",
"FirstName": "Rose",
"Id": "003o000000BTRXuAAP",
"LastName": "Gonzalez"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXvAAP"
},
"Email": "sean#edge.com",
"FirstName": "Sean",
"Id": "003o000000BTRXvAAP",
"LastName": "Forbes"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXwAAP"
},
"Email": "jrogers#burlington.com",
"FirstName": "Jack",
"Id": "003o000000BTRXwAAP",
"LastName": "Rogers"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXxAAP"
},
"Email": "pat#pyramid.net",
"FirstName": "Pat",
"Id": "003o000000BTRXxAAP",
"LastName": "Stumuller"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXyAAP"
},
"Email": "a_young#dickenson.com",
"FirstName": "Andy",
"Id": "003o000000BTRXyAAP",
"LastName": "Young"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXzAAP"
},
"Email": "barr_tim#grandhotels.com",
"FirstName": "Tim",
"Id": "003o000000BTRXzAAP",
"LastName": "Barr"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY0AAP"
},
"Email": "bond_john#grandhotels.com",
"FirstName": "John",
"Id": "003o000000BTRY0AAP",
"LastName": "Bond"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY1AAP"
},
"Email": "spavlova#uog.com",
"FirstName": "Stella",
"Id": "003o000000BTRY1AAP",
"LastName": "Pavlova"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY2AAP"
},
"Email": "lboyle#uog.com",
"FirstName": "Lauren",
"Id": "003o000000BTRY2AAP",
"LastName": "Boyle"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY3AAP"
},
"Email": "b.levy#expressl&t.net",
"FirstName": "Babara",
"Id": "003o000000BTRY3AAP",
"LastName": "Levy"
}]';
Result: # of Records 1937
Shows the number of characters (I think) instead of the number of records returned and the unordered list is not displaying.
Look at the code:
$scope.output = '[{ ... }]';
So, output is a variable of type string. It's not an array. If you want an array, it should be
$scope.output = [{ ... }];
But then, the code would still be wrong:
<li data-ng-repeat="attribute in output.attributess">
{{attributes.LastName}}
</li>
output is an array. It doesn't have any attributess field. So it should be
<li data-ng-repeat="element in output">
{{ element.attributes.LastName }}
</li>

Resources