Javascript to iterate through objects in array? - javascript

I'm trying to iterate through a large list of financial institutions (condensed from the 8974 objects to only 2 below) using javascript.
I want to save "id" and "name" in a new list. I'm a beginner at this and after trying some code in w3 website was unable to iterate through the different object capturing multiple "id"s and "name"s.
Anyone have an idea how to accomplish iterating through and capturing every
"id" and "name" in each json object within the json array?
{
"found": 8974,
"displaying": 8974,
"moreAvailable": false,
"createdDate": 1550566839,
"institutions": [
{
"id": 5,
"name": "Chase",
"accountTypeDescription": "Banking",
"phone": "1-800-242-7324",
"urlHomeApp": "https://www.chase.com/",
"urlLogonApp": "https://chaseonline.chase.com/chaseonline/logon/sso_logon.jsp",
"oauthEnabled": false,
"urlForgotPassword": "",
"urlOnlineRegistration": "",
"institutionClass": "banking",
"tpCurrencyCode": "USD",
"specialText": "Please enter your Chase User ID and Password. ",
"emailAddress": "https://www.bankone.com/contactus/#personal",
"address": {
"addressLine1": "270 Park Avenue",
"addressLine2": "270 Park Avenue, New York",
"city": "New York",
"country": "USA",
"postalCode": "10017",
"state": "NY"
}
},
{
"id": 170703,
"name": "WWW Bank",
"accountTypeDescription": "TestFI",
"phone": "21210",
"urlHomeApp": "http://www.finbank.com",
"urlLogonApp": "http://www.finbank.com",
"oauthEnabled": false,
"urlForgotPassword": "",
"urlOnlineRegistration": "",
"institutionClass": "testfi",
"tpCurrencyCode": "USD",
"specialText": "Please enter your WWW Bank User and Password required for login.",
"emailAddress": "finbank#finicity.com",
"address": {
"addressLine1": "Utah",
"addressLine2": "Utah",
"city": "Utah",
"country": "USA",
"postalCode": "",
"state": ""
}
}
]
}

Here we use a simnple map function to get desired array.
let data = {
"found": 8974,
"displaying": 8974,
"moreAvailable": false,
"createdDate": 1550566839,
"institutions": [
{
"id": 5,
"name": "Chase",
"accountTypeDescription": "Banking",
"phone": "1-800-242-7324",
"urlHomeApp": "https://www.chase.com/",
"urlLogonApp": "https://chaseonline.chase.com/chaseonline/logon/sso_logon.jsp",
"oauthEnabled": false,
"urlForgotPassword": "",
"urlOnlineRegistration": "",
"institutionClass": "banking",
"tpCurrencyCode": "USD",
"specialText": "Please enter your Chase User ID and Password. ",
"emailAddress": "https://www.bankone.com/contactus/#personal",
"address": {
"addressLine1": "270 Park Avenue",
"addressLine2": "270 Park Avenue, New York",
"city": "New York",
"country": "USA",
"postalCode": "10017",
"state": "NY"
}
},
{
"id": 170703,
"name": "WWW Bank",
"accountTypeDescription": "TestFI",
"phone": "21210",
"urlHomeApp": "http://www.finbank.com",
"urlLogonApp": "http://www.finbank.com",
"oauthEnabled": false,
"urlForgotPassword": "",
"urlOnlineRegistration": "",
"institutionClass": "testfi",
"tpCurrencyCode": "USD",
"specialText": "Please enter your WWW Bank User and Password required for login.",
"emailAddress": "finbank#finicity.com",
"address": {
"addressLine1": "Utah",
"addressLine2": "Utah",
"city": "Utah",
"country": "USA",
"postalCode": "",
"state": ""
}
}
]
};
let newArr = data.institutions.map(i => {
return {id: i.id, name: i.name }
});
console.log(newArr);

Related

how do i delete child element in nested Json Array and rename Id of child element and merge it to parent element? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 11 months ago.
Improve this question
I've JSON array which is returned after an edit success in react-redux-saga. The record I updated before and after successfull update comes together as an element of JSON array. So, I need to replace the old resort element with the newly updated resort values and also delete the old resort.
Here, in this example, I have updated resortId(id)=15, but my redux-saga returns both-old resort and the updated new resort,clubbed together in a single element in JSON array cuz in the this.props(cuz place part in this id=15 belongs to another saga store).
resortafterupdate=[{
"id": 5,
"name": "The Ananta Udaipur",
"address": "Village Bujhda,Tehsil Girwa",
"placeId": 2,
"city": "Udaipur",
"state": "Rajasthan",
"country": "India",
"details": "string",
"phone": "567890055"
}, {
"id": 10,
"name": "Test",
"address": "Raj Garden road111",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "afafas asdfasfas",
"phone": "986289"
}, {
"id": 11,
"name": "bbbbb",
"address": "ggjgjgjh",
"placeId": 1,
"city": "Panjim",
"state": "Goa",
"country": "India",
"details": "jjkhkhkhk",
"phone": "89789789"
}, {
"id": 12,
"name": "The Classic",
"address": "chandni chowk",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "beverages",
"phone": "687686868"
}, {
"id": 9,
"name": "xyzzzz 56788998877666",
"address": "111111223345566Raj Garden road111",
"placeId": 2,
"city": "Udaipur",
"state": "Rajasthan",
"country": "India",
"details": "afafas asdfasfas",
"phone": "11111111111"
}, {
"id": 13,
"name": "Byculla Navi ln",
"address": "Byculla Navi ln",
"placeId": 3,
"city": "Puducherry",
"state": "Puducherry",
"country": "India",
"details": "beverages",
"phone": "04409"
}, {
"id": 8,
"name": "test address",
"address": "Raj Garden road111",
"placeId": 1,
"city": "Panjim",
"state": "Goa",
"country": "India",
"details": "afafas asdfasfas",
"phone": "3253453434"
}, {
"id": 7,
"name": "test name",
"address": "test address",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "afafas asdfasfas",
"phone": "9862897999"
},
{
"resort": {
"id": 15,
"name": "AAA",
"address": "hjhgkjk",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "jhkhkjhkjhkjh",
"phone": "98789797"
},
"id": 15,
"name": "BBB",
"address": "NewTown",
"details": "jhkhkjhkjhkjh",
"phone": "98789797",
"place": {
"id": 3,
"city": "Puducherry",
"country": "India",
"state": "Puducherry"
}
}
]
How do I delete the child element resort with id=15 as this is old record before the update? And how do I rename the id of "place" to "placeId" and merge the inner parts - placeId,city,state and country to the outer part of the element - name=BBB and Id=15 and address": "NewTown","details": "jhkhkjhkjhkjh","phone": "98789797" to something like this
resortafterupdate=[{
"id": 5,
"name": "The Ananta Udaipur",
"address": "Village Bujhda,Tehsil Girwa",
"placeId": 2,
"city": "Udaipur",
"state": "Rajasthan",
"country": "India",
"details": "string",
"phone": "567890055"
}, {
"id": 10,
"name": "Test",
"address": "Raj Garden road111",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "afafas asdfasfas",
"phone": "986289"
}, {
"id": 11,
"name": "bbbbb",
"address": "ggjgjgjh",
"placeId": 1,
"city": "Panjim",
"state": "Goa",
"country": "India",
"details": "jjkhkhkhk",
"phone": "89789789"
}, {
"id": 12,
"name": "The Classic",
"address": "chandni chowk",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "beverages",
"phone": "687686868"
}, {
"id": 9,
"name": "xyzzzz 56788998877666",
"address": "111111223345566Raj Garden road111",
"placeId": 2,
"city": "Udaipur",
"state": "Rajasthan",
"country": "India",
"details": "afafas asdfasfas",
"phone": "11111111111"
}, {
"id": 13,
"name": "Byculla Navi ln",
"address": "Byculla Navi ln",
"placeId": 3,
"city": "Puducherry",
"state": "Puducherry",
"country": "India",
"details": "beverages",
"phone": "04409"
}, {
"id": 8,
"name": "test address",
"address": "Raj Garden road111",
"placeId": 1,
"city": "Panjim",
"state": "Goa",
"country": "India",
"details": "afafas asdfasfas",
"phone": "3253453434"
}, {
"id": 7,
"name": "test name",
"address": "test address",
"placeId": 4,
"city": "Shillong",
"state": "Meghalaya",
"country": "India",
"details": "afafas asdfasfas",
"phone": "9862897999"
},
{
"id": 15,
"name": "AAA",
"address": "hjhgkjk",
"details": "jhkhkjhkjhkjh",
"phone": "98789797",
"placeId": 3,
"city": "Puducherry",
"country": "India",
"state": "Puducherry"
}
]
I have deleted the "resort" but unable to rename id in place part to placeId and merge it to the outer element.
function deleteKey(obj, keyToDelete) {
Object.keys(obj).forEach(key => {
if (key.toLowerCase() === keyToDelete) {
delete obj[key];
}
value = obj[key];
if (value instanceof Object) {
deleteKey(value, keyToDelete);
}
});
}
deleteKey(resortafterupdate, "resort");
I found a solution to flatten the child props using this answe on this link
Solution
Here's the code I modified according to my needs
function deleteKey(obj, keyToDelete) {
Object.keys(obj).forEach(key => {
if (key.toLowerCase() === keyToDelete) {
delete obj[key];
}
value = obj[key];
if (value instanceof Object) {
deleteKey(value, keyToDelete);
}
});
}
Object.flatten = function(data){
var resultMain = [];
var result = {};
function recurse(cur, prop){
if (Object(cur) !== cur){
result[prop] = cur;
}else if(Array.isArray(cur)){
for(var i=0, l=cur.length; i<l; i++)
recurse(cur[i], prop);
if(l == 0)
result[prop] = [];
}else{
var isEmpty = true;
for(var p in cur){
isEmpty = false;
recurse(cur[p], prop==="place" && p==="id"? prop+"Id" : p);
}
if(isEmpty && prop)
result[prop] = {};
}
}
for(var i=0; i<data.length; i++){
result = {};
recurse(data[i], "");
resultMain[i] = result;
}
return resultMain;
}
deleteKey(updateResorts, "resort");
console.log(Object.flatten(newlyaddedResort));

Modify JSON object using JavaScript based on title search

I have a ASP.Net hidden field which has data in JSON format as shown below
[
{
"RegionName": "USA",
"Contact": {
"LegalName": "somethinglegal",
"StreetAddress": "hello",
"City": "Test",
"State": "Test",
"Zip": "8888",
"Country": "USA",
"VAT": "VAT"
},
"EntityContact": {
"LegalName": "Test",
"Email": "Test#test.com",
"Phone": "9998887777"
}
},
{
"RegionName": "Mexico",
"Contact": {
"LegalName": "somethinglegal",
"StreetAddress": "hello",
"City": "Test",
"State": "Test",
"Zip": "33333",
"Country": "Mexico",
"VAT": "VAT"
},
"EntityContact": {
"LegalName": "Amex",
"Email": "test#test.com",
"Phone": "9998887777"
}
}
]
which is read in Javascript using below code
var value = $('#countryInvoice')[0].defaultValue;
Now I want to search this JSON using javascript based on Region name and delete the record from the hidden field. So I want to remove the data point for say USA so only the below remains
[
{
"RegionName": "Mexico",
"Contact": {
"LegalName": "somethinglegal",
"StreetAddress": "hello",
"City": "Test",
"State": "Test",
"Zip": "33333",
"Country": "Mexico",
"VAT": "VAT"
},
"EntityContact": {
"LegalName": "Amex",
"Email": "test#test.com",
"Phone": "9998887777"
}
}
]
Can someone please tell me how to do it in JQuery or Javascript.
Thanks
//ES5
var res = value.filter(function(e) { return e["RegionName"] != "USA"; })
//ES6
var res = value.filter(e => e["RegionName"] != "USA")
Note: The Arrow function is ES6 syntax.
You just need to filter it out using Array.prototype.filter().
Check out the MDN Docs here
The snippet below filters out USA
let value = [{
"RegionName": "USA",
"Contact": {
"LegalName": "somethinglegal",
"StreetAddress": "hello",
"City": "Test",
"State": "Test",
"Zip": "8888",
"Country": "USA",
"VAT": "VAT"
},
"EntityContact": {
"LegalName": "Test",
"Email": "Test#test.com",
"Phone": "9998887777"
}
},
{
"RegionName": "Mexico",
"Contact": {
"LegalName": "somethinglegal",
"StreetAddress": "hello",
"City": "Test",
"State": "Test",
"Zip": "33333",
"Country": "Mexico",
"VAT": "VAT"
},
"EntityContact": {
"LegalName": "Amex",
"Email": "test#test.com",
"Phone": "9998887777"
}
}
];
let newArray = value.filter(arr => arr.RegionName !== 'USA');
console.log(newArray);

How to get the modified object in angularjs

I have a requirement where I need to send modified value alone in the object.
Following is my object:
{
"Code": 200,
"ErrorMessage": null,
"Result": {
"Locations": [{
"LocationName": "Location 1",
"Address": "XYZ",
"City": "Houston",
"State": "TEXAS",
"StateCode": "TX",
"Zipcode": "75201"
},
{
"LocationName": "Location 2",
"Address": "ABC",
"City": "Germantown",
"State": "CALIFORNIA",
"StateCode": "CA",
"Zipcode": "90001"
}]
}
}
I used ng-repeat inorder to display data which has input fields. Now If I modify Location 1 in that Locations Object. I want to send only Location 1 details.
Is it possible to do that in Angular. I am new to angular.
you can use ng-change to get the modified object
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.changeItem = function(item){
console.log(item.LocationName)
}
$scope.items = {
"Code": 200,
"ErrorMessage": null,
"Result": {
"Locations": [{
"LocationName": "Location 1",
"Address": "XYZ",
"City": "Houston",
"State": "TEXAS",
"StateCode": "TX",
"Zipcode": "75201"
},
{
"LocationName": "Location 2",
"Address": "ABC",
"City": "Germantown",
"State": "CALIFORNIA",
"StateCode": "CA",
"Zipcode": "90001"
}]
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="item in items.Result.Locations">
<input ng-model="item.LocationName" ng-change="changeItem(item)"/>
</div>
</div>

Filter data from object inside array typescript

I have an array events as follows,
[{
"_id": "5890b4796166c457ffdee243",
"description": "Adele",
"name": "Adele",
"place": {
"name": "Houston Toyota Center",
"location": {
"city": "Houston",
"country": "United States",
"latitude": 29.751054939716,
"longitude": -95.362142762854,
"state": "TX",
"street": "1510 Polk St",
"zip": "77002",
"_id": "58992aebf2dbf4369c0a0325"
},
"id": "200866860532",
"_id": "5890b47c6166c457ffdee394"
},
"start_time": "2016-11-09T20:00:00-0600",
"id": "1644669702488073"
}, {
"_id": "5890b4796166c457ffdee242",
"description": "Please note that delivery will be delayed on all tickets until Friday January 8, 2016. Please adhere to the published ticket limits, which will be strictly enforced. If you exceed these limits, you may have any or all of your orders and tickets cancelled without notice. Please note: Every person, regardless of age, must have a ticket to be admitted to this event. RAIL RIDE EVENT: When you purchase a ticket to a Talking Stick Resort Arena event, you can ride the METRO LIGHT RAIL at no cost for four hours prior to the event through the end of the transit day.",
"name": "Adele",
"place": {
"name": "Talking Stick Resort Arena",
"location": {
"city": "Phoenix",
"country": "United States",
"latitude": 33.445995372225,
"longitude": -112.07135782626,
"state": "AZ",
"street": "201 E Jefferson St",
"zip": "85004",
"_id": "58992aebf2dbf4369c0a0327"
},
"id": "53475637527",
"_id": "5890b4856166c457ffdee427"
},
"start_time": "2016-11-21T19:30:00-0700",
"id": "905384112862937"
}, {
"_id": "5890b4796166c457ffdee24a",
"description": "Delivery of tickets will be delayed until 12/31/15",
"name": "Adele",
"place": {
"name": "AmericanAirlines Arena",
"location": {
"city": "Miami",
"country": "United States",
"latitude": 25.781236943411,
"longitude": -80.188316709574,
"state": "FL",
"street": "601 Biscayne Blvd",
"zip": "33132",
"_id": "58992aebf2dbf4369c0a0329"
},
"id": "120400119061",
"_id": "5890b4946166c457ffdee464"
},
"start_time": "2016-10-25T19:30:00-0400",
"id": "445046279020601"
}, {
"_id": "5890b4796166c457ffdee244",
"description": "Adele",
"name": "Adele",
"place": {
"name": "Houston Toyota Center",
"location": {
"city": "Houston",
"country": "United States",
"latitude": 29.751054939716,
"longitude": -95.362142762854,
"state": "TX",
"street": "1510 Polk St",
"zip": "77002",
"_id": "58992aebf2dbf4369c0a032b"
},
"id": "200866860532",
"_id": "5890b47c6166c457ffdee354"
},
"start_time": "2016-11-08T20:00:00-0600",
"id": "1662607760654203"
}, {
"_id": "5890b4796166c457ffdee245",
"description": "Delivery will be delayed until Oct 2, 2016.",
"name": "Adele",
"place": {
"name": "American Airlines Center",
"location": {
"city": "Dallas",
"country": "United States",
"latitude": 32.790485550848,
"longitude": -96.810278349053,
"state": "TX",
"street": "2500 Victory Ave",
"zip": "75219",
"_id": "58992aebf2dbf4369c0a032d"
},
"id": "26606856232",
"_id": "5890b47b6166c457ffdee2e4"
},
"start_time": "2016-11-02T20:00:00-0500",
"id": "649884741817020"
}]
How to get all the city from the above json using typescript?
i have tried this,
this.eventsFiltered = this.events.filter(
book => book.place.location.city);
try this:
this.eventsFiltered = this.events.map(
book => book.place.location.city);
EDIT
i want to filter the events which has speficic places?
let events = [{
"_id": "5890b4796166c457ffdee243",
"description": "Adele",
"name": "Adele",
"place": {
"name": "Houston Toyota Center",
"location": {
"city": "Houston",
"country": "United States",
"latitude": 29.751054939716,
"longitude": -95.362142762854,
"state": "TX",
"street": "1510 Polk St",
"zip": "77002",
"_id": "58992aebf2dbf4369c0a0325"
},
"id": "200866860532",
"_id": "5890b47c6166c457ffdee394"
},
"start_time": "2016-11-09T20:00:00-0600",
"id": "1644669702488073"
}, {
"_id": "5890b4796166c457ffdee242",
"description": "Please note that delivery will be delayed on all tickets until Friday January 8, 2016. Please adhere to the published ticket limits, which will be strictly enforced. If you exceed these limits, you may have any or all of your orders and tickets cancelled without notice. Please note: Every person, regardless of age, must have a ticket to be admitted to this event. RAIL RIDE EVENT: When you purchase a ticket to a Talking Stick Resort Arena event, you can ride the METRO LIGHT RAIL at no cost for four hours prior to the event through the end of the transit day.",
"name": "Adele",
"place": {
"name": "Talking Stick Resort Arena",
"location": {
"city": "Phoenix",
"country": "United States",
"latitude": 33.445995372225,
"longitude": -112.07135782626,
"state": "AZ",
"street": "201 E Jefferson St",
"zip": "85004",
"_id": "58992aebf2dbf4369c0a0327"
},
"id": "53475637527",
"_id": "5890b4856166c457ffdee427"
},
"start_time": "2016-11-21T19:30:00-0700",
"id": "905384112862937"
}, {
"_id": "5890b4796166c457ffdee24a",
"description": "Delivery of tickets will be delayed until 12/31/15",
"name": "Adele",
"place": {
"name": "AmericanAirlines Arena",
"location": {
"city": "Miami",
"country": "United States",
"latitude": 25.781236943411,
"longitude": -80.188316709574,
"state": "FL",
"street": "601 Biscayne Blvd",
"zip": "33132",
"_id": "58992aebf2dbf4369c0a0329"
},
"id": "120400119061",
"_id": "5890b4946166c457ffdee464"
},
"start_time": "2016-10-25T19:30:00-0400",
"id": "445046279020601"
}, {
"_id": "5890b4796166c457ffdee244",
"description": "Adele",
"name": "Adele",
"place": {
"name": "Houston Toyota Center",
"location": {
"city": "Houston",
"country": "United States",
"latitude": 29.751054939716,
"longitude": -95.362142762854,
"state": "TX",
"street": "1510 Polk St",
"zip": "77002",
"_id": "58992aebf2dbf4369c0a032b"
},
"id": "200866860532",
"_id": "5890b47c6166c457ffdee354"
},
"start_time": "2016-11-08T20:00:00-0600",
"id": "1662607760654203"
}, {
"_id": "5890b4796166c457ffdee245",
"description": "Delivery will be delayed until Oct 2, 2016.",
"name": "Adele",
"place": {
"name": "American Airlines Center",
"location": {
"city": "Dallas",
"country": "United States",
"latitude": 32.790485550848,
"longitude": -96.810278349053,
"state": "TX",
"street": "2500 Victory Ave",
"zip": "75219",
"_id": "58992aebf2dbf4369c0a032d"
},
"id": "26606856232",
"_id": "5890b47b6166c457ffdee2e4"
},
"start_time": "2016-11-02T20:00:00-0500",
"id": "649884741817020"
}];
let eventsFiltered = events.map(
book => book.place.location.city);
console.log(eventsFiltered);
let city = 'Houston';
let eventsCt = events.filter(book => book.place.location.city == city);
console.log('2nd question');
console.log(eventsCt);
EDIT 2
i have a field named "parent" which is an array of string. i already
have a string named "12344" which is a part of array parent. how do i
check if the events.parent cotains this string and filter those
objects
let p = '1234';
let eventsF = events.filter(book => book.parent && Array.isArray(book.parent)&& book.parent.indexOf(p) !== -1);
Filter used for filter records with where conditions. In your case you want transform data and you just want a array of city from an array of object. So in this case use map instance of filter
Example
this.cityList = this.events.map(book => book.place.location.city);

Jqgrid - how to reload JQgrid data with new data output based on user form submission?

I have created a search box, which the user enters a name or id in the search form input box and it returns the result . Only problem it works only once.
Here is my HTML below
<button id="basic-search" class="btn btn-default " type="button" > <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<input type="text" id="basicsearchVal" class="form-control" placeholder="Enter text,." autocomplete="on">
I then pass the entered value "searchInput" as a querystring url to the jQgrid
var searchInput = $("#basicsearchVal").val()
SearchData =newURL +"/services-monitor/GetQuickSearch?searchString="+searchInput;
When the user searches, it return the result the first time. but when I try to enter a new name or number in the search form box second time, the jqgrid doesnt seem to update the result, it just show the old result, even though i can see the updated user submitted value is being passed correctly to the JQgrid ajax call.
Only if I refresh the page manually every time it return the result
I also added this as per examples online.:
$(".search-result").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
jQuery(".search-result").trigger("reloadGrid");
what can I do to fix this? why wont JQgrid reload and display the updated results?
Here my JS CODE and FIDDLE
var jsonData = [{
"Id": 919,
"CertificateNumber": "4829",
"Name": "1880 Bank",
"FullName": "1880 Bank",
"address": "304 HIGH STREET",
"city": "CAMBRIDGE",
"state": "MD",
"zip": "21613"
}, {
"Id": 6020,
"CertificateNumber": "57899",
"Name": "1st Advantage Bank",
"FullName": "1st Advantage Bank",
"address": "240 SALT LICK ROAD",
"city": "SAINT PETERS",
"state": "MO",
"zip": "63376"
}, {
"Id": 3817,
"CertificateNumber": "22039",
"Name": "1st Bank",
"FullName": "1st Bank",
"address": "201 NORTH WILBUR AVE",
"city": "BROADUS",
"state": "MT",
"zip": "59317"
}, {
"Id": 3054,
"CertificateNumber": "16419",
"Name": "1st Bank & Trust",
"FullName": "1st Bank & Trust",
"address": "710 SOUTH PARK DRIVE",
"city": "BROKEN BOW",
"state": "OK",
"zip": "74728"
}, {
"Id": 4843,
"CertificateNumber": "30367",
"Name": "1st Bank of Sea Isle City",
"FullName": "1st Bank of Sea Isle City",
"address": "4301 LANDIS AVENUE",
"city": "SEA ISLE CITY",
"state": "NJ",
"zip": "08243"
}, {
"Id": 5817,
"CertificateNumber": "57298",
"Name": "1st Bank Yuma",
"FullName": "1st Bank Yuma",
"address": "2799 SOUTH 4TH AVENUE",
"city": "YUMA",
"state": "AZ",
"zip": "85364"
}, {
"Id": 5031,
"CertificateNumber": "32487",
"Name": "1st Cameron State Bank",
"FullName": "1st Cameron State Bank",
"address": "124 SOUTH WALNUT",
"city": "CAMERON",
"state": "MO",
"zip": "64429"
}, {
"Id": 6278,
"CertificateNumber": "58485",
"Name": "1st Capital Bank",
"FullName": "1st Capital Bank",
"address": "5 HARRIS COURT, BLDG N, # NO",
"city": "MONTEREY",
"state": "CA",
"zip": "93940"
}, {
"Id": 5942,
"CertificateNumber": "57657",
"Name": "1st Century Bank, National Association",
"FullName": "1st Century Bank, National Association",
"address": "1875 CENTURY PARK EAST, # 14",
"city": "LOS ANGELES",
"state": "CA",
"zip": "90067"
}, {
"Id": 5666,
"CertificateNumber": "35456",
"Name": "1st Colonial Community Bank",
"FullName": "1st Colonial Community Bank",
"address": "1040 HADDON AVENUE",
"city": "COLLINGSWOOD",
"state": "NJ",
"zip": "08108"
}, {
"Id": 2116,
"CertificateNumber": "11706",
"Name": "1st Community Bank",
"FullName": "1st Community Bank",
"address": "407 THIRD STREET",
"city": "SHERRARD",
"state": "IL",
"zip": "61281"
}, {
"Id": 4381,
"CertificateNumber": "27552",
"Name": "1st Constitution Bank",
"FullName": "1st Constitution Bank",
"address": "2650 ROUTE 130",
"city": "CRANBURY",
"state": "NJ",
"zip": "08512"
}, {
"Id": 5327,
"CertificateNumber": "34393",
"Name": "1st Equity Bank",
"FullName": "1st Equity Bank",
"address": "3956 WEST DEMPSTER STREET",
"city": "SKOKIE",
"state": "IL",
"zip": "60076"
}, {
"Id": 5928,
"CertificateNumber": "57611",
"Name": "1st Equity Bank Northwest",
"FullName": "1st Equity Bank Northwest",
"address": "1330 DUNDEE ROAD",
"city": "BUFFALO GROVE",
"state": "IL",
"zip": "60089"
}, {
"Id": 326,
"CertificateNumber": "1673",
"Name": "1st Financial Bank USA",
"FullName": "1st Financial Bank USA",
"address": "331 N. DAKOTA DUNES BLVD.",
"city": "DAKOTA DUNES",
"state": "SD",
"zip": "57049"
}, {
"Id": 6307,
"CertificateNumber": "58548",
"Name": "1st Manatee Bank",
"FullName": "1st Manatee Bank",
"address": "12215 US HIGHWAY 301 N",
"city": "PARRISH",
"state": "FL",
"zip": "34219"
}, {
"Id": 1220,
"CertificateNumber": "6646",
"Name": "1st National Bank",
"FullName": "1st National Bank",
"address": "730 EAST MAIN STREET",
"city": "LEBANON",
"state": "OH",
"zip": "45036"
}, {
"Id": 647,
"CertificateNumber": "3564",
"Name": "1st National Bank of South Florida",
"FullName": "1st National Bank of South Florida",
"address": "1550 NORTH KROME AVENUE",
"city": "HOMESTEAD",
"state": "FL",
"zip": "33030"
}];
JQGRID code
window.makeSearchGridAjaxCall = function(detailPageUrl, SearchData, jsondata) {
console.log(" SearchData " + SearchData);
$(".search-result").jqGrid({
url: SearchData,
/**url: "/echo/json/", */
mtype: "POST",
// data: mydata,
datatype: "json",
emptyrecords: "0 records found",
postData: {
json: JSON.stringify(jsondata)
},
success: function(mydata, textStatus, jqXHR) {
console.log(" data :" + mydata);
console.log(" data :" + bmUSearchData);
},
colModel: [
{
name: 'Id',
label: ' Id',
align: 'left',
width: 20,
hidden: true
}, {
name: 'CertificateNumber',
label: 'Cert #',
align: 'center',
width: 30,
search: true,
key: true,
formatter: "showlink",
formatoptions: {
baseLinkUrl: detailPageUrl,
idName: "",
addParam: function(options) {
return "bankid=" + options.rowData.bankId + "";
}
}
},
{
name: 'address',
label: 'Address',
align: 'left',
width: 85,
search: false
}, {
name: 'city',
label: 'City',
align: 'left',
width: 50,
search: false
}, {
name: 'state',
label: 'State',
align: 'left',
width: 20,
search: true
}, {
name: 'zip',
label: 'Zip',
align: 'right',
width: 25,
search: false
},
],
additionalProperties: ["address", "city", "state", "zip"],
subGrid: true,
subGridRowExpanded: function(subgridDivId, rowid) {
var item = $(this).jqGrid("getLocalRow", rowid);
$("#" + $.jgrid.jqID(subgridDivId)).html("<div class=\"col-md-1\"><b>Address: </b></div>" + item.address +
"<br/><div class=\"col-md-1\"><b>City: </b></div>" + item.city + "<br><div class=\"col-md-1\"> <b>Zip: </b></div>" + item.zip + "");
},
iconSet: "fontAwesome",
loadonce: true,
**navOptions: { reloadGridOptions: { fromServer: true } },**
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
forceClientSorting: true,
sortname: "Symbol",
height: "auto",
caption: "<b>Watch List</b>",
viewrecords: true,
autowidth: true, // set 'true' here
shrinkToFit: true, // well, it's 'true' by default
loadError: function(jqXHR, textStatus, errorThrown) {
var p = $(this).jqGrid("getGridParam"),
$errorDiv = $(this.grid.eDiv),
$errorSpan = $errorDiv.children(".ui-jqgrid-error");
$errorSpan.html("No Data Available");
$errorDiv.show();
if (p.errorDisplayTimeout) {
setTimeout(function() {
$errorSpan.empty();
$errorDiv.hide();
}, p.errorDisplayTimeout);
}
},
});
$(".search-result").jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
$(window).resize(function() {
var outerwidth = $('#grid').width();
$('.search-result').setGridWidth(outerwidth); // setGridWidth method sets a new width to the grid dynamically
});
/************************************************************************************/
}
$(document).ready(function() {
var newURL;
var SearchData;
if (document.location.hostname == "localhost") {
newURL = "http://localhost:8080";
} else {
newURL = window.location.protocol + "//" + window.location.host;
}
console.log("URL " + newURL);
var detailPageUrl = "bm_summary_tpl.html";
//var prodUrl ="";
var mydata;
$("#basic-search").click(function(e) {
e.preventDefault();
var searchInput = $("#basicsearchVal").val()
if ($('input:text').val().length == 0) {
alert("Searched clicked and text is empty" + searchInput)
} else {
alert("go to search page " + $('input:text').val());
console.log("SearchData " + SearchData);
$(".search-result").load();
//search-result
console.log(" +searchInput " + searchInput);
SearchData = newURL + "/services-monitor/GetQuickSearch?searchString=" + searchInput;
console.log("bmSearchData " + SearchData);
makeSearchGridAjaxCall(detailPageUrl, SearchData, mydata);
$(".search-result").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
jQuery(".search-result").trigger("reloadGrid");
$("#basicsearchVal").val("");
}
});
})
;
I figured out the solution
at first i tried these 2 , which didnt work in my case.
$("#list").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
$("#list").trigger("reloadGrid", { fromServer: true, page: 1 });
I applied this which worked like a charm, it clear the grid and reload data every time the user searches new data
$(".search-result").jqGrid('GridUnload');
var searchInput = $("#basicsearchVal").val()
if ($('input:text').val().length == 0) {
alert("Please enter a Name to search")
}
else {
$( "#watchlist-b").remove();
$("#watchList-b1").remove();
$("#watchList-b2").remove();
SearchData =newURL +"/services-monitor/GetQuickSearch?searchString="+searchInput;
makeSearchGridAjaxCall (detailPageUrl,SearchData,mydata);
jQuery(".search-result").trigger("reloadGrid");

Categories