Using jQuery inArray with array of JavaScript Objects - javascript

I'm working with an array of JavaScript Objects as such:
var IssuesArray = [{"ID" : "1", "Name" : "Issue1"},
{"ID" : "2", "Name" : "Issue2"},
{"ID" : "3", "Name" : "Issue3"}];
My end effort is trying to remove an object from the array when I know the ID of the object. I'm trying to use code that is something like this:
$.grep(IssuesArray, function(n, i) {
return i != $.inArray("2", IssuesArray);
});
So this shows that I'm trying to use jQuery grep to remove an element by index (i), which I am trying to retrieve by using jQuery inArray. Of course the code above will not work because "2" should correspond to an item in the array, which are all JavaScript objects (an object will never equal "2"). I need something like:
$.inArray(javascriptObject.Name=="2", IssuesArray);
Has anyone ever had any success using inArray to get indexes of JavaScript objects, using a field value within that object? Any help would be appreciated. Thanks.
UPDATE/CLARIFICATION: A couple people have been confused by my question, but I received an answer that works nonetheless. I'm using:
IssuesArray = $.grep(IssuesArray, function(n) {
return n.ID != "2";
});
I think I was thinking about it too deep, when the solution was really pretty easy. I simply wanted to remove a JavaScript object from an array, so long as I knew a particular property's value in that object. The above solution uses jQuery's grep to return everything from the array except any object whose ID == "2". As usual, thanks for the quick answers. A couple answers were good solutions and would have worked using (using "splice", for example), but this solution seems to be the shortest most straightforward. Thanks again.

n is your list item, so something like this should do the job:
$.grep(issuesArray, function(n) { return n.ID != "2"; })

Not sure if I understood your question correctly, but I would do:
$.each(IssuesArray, function(i, item){
if (item.ID == IDToBeRemoved) IssuesArray.splice(i, 1);
});

var spliceID = function(id, arr) {
$(arr).each(function(i, el) {
if (el.ID == id) {
arr.splice(i,1);
return false;
}
});
return arr;
}
console.log(spliceID('2', IssuesArray));

Without using jQuery or other frameworks:
var newArray = [];
var i=0, len=IssuesArray.length;
var bad_id = "2"; // or whatever
while(i<len) {
if(IssuesArray[i].ID !== bad_id) {
newArray.push(IssuesArray[i++]);
}
}

Simplify??
var IssuesArray = {
1: "Issue1",
2: "Issue2",
3: "Issue3"
};
var issue2 = IssuesArray[2];
Why a list of hashes when a single hash will do?

Related

Remove element from named values in javascript

I have the following function, which is called when a google forms is submitted. I'm trying to concatenate all answers into a single array that's gonna be used latter:
function onFormSubmit(e) {
var respostas = e.namedValues;
for(item in respostas){
rp = rp.concat(respostas[item]);
}
}
But I would like to drop the timestamp that comes together with the answers. I can access it with respostas['Timestamp'], but I can't find a way to drop or ignore it. The documentation didn't help much.
var cp = [];
function onSubmitForm(e) {
var respostas = e.namedValues;
for (var name in respostas) {
if (respostas.hasOwnProperty(name) {
if (name !== 'Timestamp') {
cp.push(respostash[name]);
}
}
}
}
This is what I would suggest. Using concat to add an item is overkill, you can just push it. Also is a good practice when you are looping over object properties to make sure that they are its own properties of that object, not inherited from prototype. You can read more about it here
You can check the name of the property before concatenate it with the rest.
If the key item equals Timestamp (the undesired property) just skip the current loop.
for(item in respostas) {
if (item === 'Timestamp') {
continue;
}
rp = rp.concat(respostas[item]);
}
EDIT: Based on comments, OP attests that item in the for..in loop is a integer, but, unless his/her code differs radically from the docs, the variable should hold strings, not numbers.
var respostas = {
'First Name': ['Jane'],
'Timestamp': ['6/7/2015 20:54:13'],
'Last Name': ['Doe']
};
for(item in respostas) {
console.log(item);
}
e.namedValues returns a JSON Object with custom keys.
var jsonObj = e.namesValues;
/* e.namedValues returns data like this...
{
"test1": "testval1",
"test2": "testval2",
"test3": "testval3",
}
*/
for(item in respostas){
Logger.log(item); //Key
Logger.log(respostas[item]); //Value
}
This should let you access the key or value on the items in respostas.
The accepted answer is better as it does more to help the user to fix their exact problem, however, I will leave this here for future users in case they want to understand how to access the variables in the object that Google Apps Scripts returns.

Angular LoadAsh - filtering records matching by fields on Multiple Objects of different Type

I've been struggling a bit learning loadash and how to correctly pull the data I want with some more advanced tricks. Single objects and lookups are pretty simple but i'm trying to pull all array records by a groupId, if that groupId exists in another object that isn't the same.
For example:
Generic JSON example of objects, each are arrays of records.
Groups ..
{
groupId:
name:
code:
}
Options ..
{
groupId:
optionId:
name:
code:
}
The problem I'm having is pulling all Options only if that groupId exist in the Groups array in loadash.
I've tried some stuff like
var results = [];
_.forEach(Groups, function(g) {
var found _.find(Options, g, function(option, group) {
return option.groupId === group.groupId;
})
results.push(found);
});
I haven't had much luck figuring out the best way to filter these down.
Any words if wisdom would be appreciated, thanks!
Something like this should work,
var result = _.filter(Options, function(o) {
return _.filter(Groups, function(g) { return g.groupId == o.groupid; }).length > 0;
});
actually i think the inner search would perform better with find, since it returns the first match, not sure though
var result = _.filter(Options, function(o) {
return _.find(Groups, { 'groupId': o.groupid });
});
hope this helps.

Is there a way to iterate and display the list of key value pairs of json using Handlebar.js

As Iam new to javascript, I found handleBar.js can be used to template with dynamic data.
I worked on a sample which worked fine and the json structure was simple and straight forward.
(function()
{
var wtsource = $("#some-template").html();
var wtTemplate = Handlebars.compile(wtsource);
var data = { users: [
{url: "index.html", name: "Home" },
{url: "aboutus.html", name: "About Us"},
{url: "contact.html", name: "Contact"}
]};
Handlebars.registerHelper('iter', function(context, options) {
var fn = options.fn, inverse = options.inverse;
var ret = "";
if(context && context.length > 0) {
for(var i=0, j=context.length; i<j; i++) {
ret = ret + fn($.extend({}, context[i], { i: i, iPlus1: i + 1 }));
}
} else {
ret = inverse(this);
}
return ret;
});
var temp=wtTemplate(data);
$("#content").html(temp);
})();
<script id="some-template" type="text/x-handlebars-template">
{{#iter users}}
<li>
{{name}}
</li>
{{/iter}}
</script>
How to iterate a json with the below structure ? Please do suggest the possible way for iterating and creating the template for the below json structure
var newData = { "NEARBY_LIST": {
"100": {
"RestaurantID": 100,
"ParentRestaurantID": 0,
"RestaurantName": "Chennai Tiffin",
"listTime": [{
"startTime": "10:00",
"closeTime": "23:30"
} ]
},
"101": {
"RestaurantID": 101,
"ParentRestaurantID": 0,
"RestaurantName": "Biriyani Factory",
"listTime": [{
"startTime": "11:00",
"closeTime": "22:00"
}]
}
}
};
Accessing the properties of an object has nothing to do with Handlebars. If you dealing with JSON and you wish to access it in general bracket or dot notation, you must first parse the JSON into a JavaScript object using the JSON.parse() function.
After this is done, you may access the properties as follows.
var property = newData['NEARBY_LIST']['100'].RestaurantName; // "Chennai Tiffin"
Here is a fiddle to illustrate.
http://jsfiddle.net/qzm0cygu/2/
I'm not entirely sure what you mean, but if your question is how you can use/read the data in newData, try this:
newData = JSON.parse(newData); //parses the JSON into a JavaScript object
Then access the object like so:
newData.NEARBY_LIST //the object containing the array
newData.NEARBY_LIST[0] //the first item (key "100")
newData.NEARBY_LIST[1] //the second item (key "101")
newData.NEARBY_LIST[0][0] //the first field of the first item (key "RestaurantID", value "100")
newData.NEARBY_LIST[0][2] //the third field of the first item (key "RestaurantName", value "Chennai Tiffin")
newData.NEARBY_LIST[0][3][0] //the first field of the fourth field of the first item (key "startTime", value "11:00")
I hope this was what you were looking for.
EDIT: as Siddharth points out, the above structure does assume you have arrays. If you are not using arrays you can access the properties by using their names as if they're in an associative array (e.g. newData["NEARBY_LIST"]["100"]. The reason I say "properties" and "as if" is because technically JavaScript doesn't support associative arrays. Because they are technically properties you may also access them like newData.NEARBY_LIST (but I don't recommend that in this case as a property name may not start with a number, so you would have to use a mix of the different notations).
On that note, I would recommend using arrays because it makes so many things easier (length checks, for example), and there are practically no downsides.
EDIT2: also, I strongly recommend using the same camelcasing conventions throughout your code. The way you currently have it (with half your properties/variables starting with capitals (e.g. "RestaurantName", "RestaurantID") and the other half being in lowerCamelCase (e.g. "listTime", "startTime")) is just asking for people (you or colleagues) to make mistakes.

localstorage: Get specific localstorage value of which contains many items

In localstorage I have key 'results' with this values:
[{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}]
To get the last item I use this:
// this is how I parse the arrays
var result = JSON.parse(localStorage.getItem("result"));
for(var i=0;i<result.length;i++) {
var item = result[i];
$('element').val(item.href);
}
How can I get the href for item-3 or for a specific ID?
Using native Array.filter
If you are targeting only modern browsers (IE9+ or a recent version of any other major browser) you can use the JavaScript 1.6 array method filter.
var testItem,
data = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];
function getItemById(data, id) {
// filter array down to only the item that has the id
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter
var ret = data.filter(function (item) {
return item.id === id;
});
// Return the first item from the filtered array
// returns undefined if item was not found
return ret[0];
}
testItem = getItemById(data, 'item-3');
Working example
Manually looping over the data
If you can't use filter you are probably stuck with just using a loop:
var testItem,
data = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];
function getItemById(data, id) {
var i, len;
for (i = 0, len = data.length; i < len; i += 1) {
if(id === data[i].id) {
return data[i];
}
}
return undefined;
}
testItem = getItemById(data, 'item-3');
Working example
Even though brute-forcing it with a loop might seem less elegant than using Array.filter, it turns out that in most cases the loop is faster than Array.filter.
Refactoring to an object instead of an array
The best solution, assuming that the id of each of your items is unique, would be refactoring the way you are storing the data. Instead of an array of objects, use an object that uses the id as a key to store an object containing the href and icon key/property values.
var data = {
"item-1": {"href": "google.com", "icon": "google.com"},
"item-2": {"href": "youtube.com", "icon": "youtube.com"},
"item-3": {"href": "google.com", "icon": "google.com"},
"item-4": {"href": "google.com", "icon": "google.com"},
"item-5": {"href": "youtube.com", "icon": "youtube.com"},
"item-6": {"href": "asos.com", "icon": "asos.com"},
"item-7": {"href": "google.com", "icon": "google.com"},
"item-8": {"href": "mcdonalds.com", "icon": "mcdonalds.com"}
};
This would make accessing items even easier and faster:
var data = JSON.parse(localStorage.getItem("result"));
data["item-3"].href;
jQuery has filter helper for that:
$(result).filter(function(){return this.id == "item-3";})[0]
Function for href of item with specific id would be:
function getItemHrefById(json, itemId){
return json.filter(function(testItem){return testItem.id == itemId;})[0].href;
}
And sample usage is:
var href = getItemHrefById(result, "item-3");
You can see working example on http://jsfiddle.net/LXvLB/
UPDATE
If you cannot read item from local storage, maybe you forgot to call JSON.stringify when setting value:
localStorage["results"] = JSON.stringify([{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}])
You need to convert json to string to be properly serialized (and to use JSON.parse to get JSON back)
This is final example.
EDIT
As Useless Code pointed out, this metod is substantially slower than native filter function (and custom loop but I think that introducing few new lines of code to save 20-30ms is overkill unless performance is a issue), so I'm updating my example to not use jquery filter. +1 please for his answer for that.
Also, what is important to point out here, if this array would have hundreds instead of 8 bookmarks, for loop would probably be statistically about twice faster (as it does not have to iterate through rest of the array). But, in that case it would probably be a good idea to put for loop into function which returns first found item which satisfies condition, and with prototypejs it probably can even be hooked up to array.
for the jquery filter method, I think using a callback function, and bind the search parameter is more elegant and readable:
function filterById(id, i, obj) {
return obj.id === id;
}
function getItemHrefById(json, itemId) {
return $(json).filter(filterById.bind(null, itemId))[0].href;
}
da usual fiddle
(however, i prefer the "for loop" approach" for this!!)

What's the best way to query an array in javascript to get just the items from it I want?

I have an array like this (with just over 3000 objects instead of the 3 here):
items = [{name:'charlie', age:'16'}, {name:'ben', age:'18'}, {name:'steve', age:'18'}]
What's the best way to return an array with just the objects of people who are 18? So I want:
items = [{name:'ben', age:'18'}, {name:'steve', age:'18'}]
The best I can think of is this (using jQuery):
newArray = []
$.each(items, function(index, item) {
if(item.age=='18') {
newArray.push(item)
}
})
Considering that there's 3000 thousand objects, and also that I'll be doing that comparison up to fifty times in one go, that's a lot of looping. Is there a better way?
You can use pure javascript
var wanted = items.filter( function(item){return (item.age==18);} );
And if your browser does not support the 1.6 version of javascript you can find an implementation of the filter method at https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter
Update
Speedwise there is a huge varying (had an error in the test) difference from a normal loop (depending on browser).. Have a look at this little test i made at http://jsperf.com/array-filter-vs-loop/3
Get matched item and items using find() and filter() method
If you want first matched single item, use find() method which returns single object.
If you want all matched , use filter() method which returns array of objects.
let items = [{name:'charlie', age:'16'},
{name:'ben', age:'18'},
{name:'steve', age:'18'}]
let all = items.filter(item=> item.age==='18')
console.log(all);
let single = items.find(item=> item.age==='18')
console.log(single);
If you're going to do the search often it may be best to keep a version of your data in a form that is quick to access.
I've used underscore.js (http://documentcloud.github.com/underscore/) to make it easy for myself, but this code here will create an object that holds your data indexed by the age field.
You end up with something that looks like this:
{
"16": [
{
"name": "charlie",
"age": "16"
}
],
"18": [
{
"name": "ben",
"age": "18"
},
{
"name": "steve",
"age": "18"
}
]
}
The code:
var itemsByAge = _(items).reduce(function(memo, item) {
memo[item.age] = memo[item.age] || [];
memo[item.age].push(item);
return memo;
}, {});
alert(JSON.stringify(itemsByAge["18"]));
No matter which method you choose (items.filter or any "query language" for json), a for loop is inevitable.
If performance is a concern, I would recommend you to use pure javascript instead of libraries like jQuery which will add overheads to the whole processing as is evident here.
Thus, your code would look like:
var newArray = [];
for(var i=0;i<items.length;i++) {
var item = items[i];
if(item.age == '18') {
newArray.push(item);
}
});
making use of javascript magnificent function eval() which evaluates string as code at runtime, we can define a prototype method for Array type
Array.prototype.where = function (query) {
var newArray = [];
for(var i=0; i<this.length; i++) {
var item = this[i];
if(eval( "item" + query )) {
newArray.push(item);
}
}
return newArray;
};
and use it with any array, passing the query as string
var newArray= items.where('.age >= 18');
Use the filter method of the array, it calls the provided callbackfunction once for each element in an array.
array.filter(<callbackfucntion>[, <Object to use>])
once i had such problem and i solved it like this
1- create an array of array
2- each index create an Index record
e.g.
var pAry=[];
var cAry=[{name:'ben', age:'18'}, {name:'steve', age:'18'}]
pAry[17]=cAry;
This way when u require person with age 18, you will get on index 17.

Categories