Similar Question:
Locate specific object by id within a JavaScript objects array
What is the best way to determine if a value exists in a given JavaScript array?
For instance:
var arr = [
{id: 1, color: 'blue'},
{id: 2, color: 'red'},
{id: 3, color: 'yellow'}
];
alert( positionOf('blue') ); // How do I find the index of blue??
To find the index of a specific color in an array, you can simply iterate through the array and compare the color values:
for(var i = 0 ; i < arr.length -1 ; i++){
if(arr[i].color == 'red'){
alert(i);
}
}
If you prefer a more encapsulated approach, you can create a helper function like this:
function findColorIndex(color){
for(var i = 0 ; i < arr.length -1 ; i++){
if(arr[i].color == color){
return i;
}
}
}
let foundFlag = false;
for (let index = 0; index < array.length; index++) {
if (array[index].color === 'blue') {
foundFlag = true;
break;
}
}
if (foundFlag) {
alert(index);
} else {
alert('Target color not found');
}
To find the blue object in the array, you must loop through each element until you come across it. Once you find the blue object, you will have its index position.
var indexOfBlue = 0;
for(; indexOfBlue < arr.length; indexOfBlue++) {
if(arr[indexOfBlue].color === 'blue') {
break;
}
}
alert(indexOfBlue)
It is advisable to develop a more comprehensive solution rather than repeating code in various sections.
Array.prototype.indexOf = (function() {
var old = Array.prototype.indexOf ||
function(v) {
var i, l = this.length;
for (i = 0; i < l; ++i) {
if (this[i] === v) {
return i;
}
}
return -1;
};
return function(v) {
var i, l;
if (typeof v != "function") {
return old.call( this, v );
}
l = this.length;
for( i = 0; i < l; ++i ) {
if (v.call( this, this[i])) {
return i;
}
}
return -1;
}
})();
arr.indexOf( function(v){return v.color == "blue";} ); //0
arr.indexOf( function(v){return v.images[0].imageData == "xxx"; }
Not the most efficient approach:
let index = -1;
$(array).each(function(i, value){
if (value.color == 'blue'){
index = i;
return false;
}
});
An improved alternative would involve creating a separate map of searchable values and their corresponding indexes for faster retrieval.
I am interested in achieving a similar effect to the example I found on this website: However, my goal is to have the old trail gradually fade into the background over time instead of cluttering the screen with persistent marks. I discovered that by usin ...
I am currently in the process of developing a spelling quiz for a project website using HTML, CSS, and JavaScript. The idea is to present the user with a word that has two missing letters indicated by underscores. The user then selects the correct answer ...
Currently, I'm delving into the world of JavaScript and Node.js, but I find myself facing challenges with asynchronous execution. I have a piece of code that may not be following best practices, but I am eager to understand why the file remains open w ...
I'm currently developing a landing page specifically for our pilots to conveniently access weather information before taking off. However, due to the limitations posed by our computer security measures, I can only utilize iframes to obtain the necessa ...
I am attempting to retrieve the session id (sid) from the response headers in a unique scenario. My client application is situated on a local environment, while my API is hosted on an ERP Next server. Upon sending a login request from the React app, I am ...
Currently, I am in the process of writing tests for my website using WebdriverIO with Mocha and Chai. However, I encountered an issue where my element is not rendered before attempting to interact with it. it('select application', function(done) ...
Currently, I am in the process of developing an app that utilizes percentages as offset positions for ease of calculation. For a visual example, you can visit this link: http://jsfiddle.net/WeC9q/1/embedded/result/ Although the zooming feature functions ...
router.get("/alw", function(req, res){ Product.find({"category": "alw"}, function(err, allProduct){ if (err){ console.log(err) } else { res.render("products/alw", {products ...
For my first app using Angular, I have defined my service as: angular.module('mean.testruns').factory('Testruns', ['$resource', function($resource) { return $resource('testruns/:testrunId', { testrunId: ...
While this question has been raised in the past, none of the answers provided seem to be accurate. Unfortunately, I am unable to comment on the original question or answers. Thus, following suggestions given to me, I have decided to create a new question. ...
I am currently working with the Quasar framework and I am trying to add a store module. Despite running the quasar new store <name> command, I keep receiving the message "No vuex store detected" in the browser console. Any idea where the issue migh ...
Recently I created a website. On this website, there is a feature where 3 images change every 7 seconds for a total of 3 cycles. The code snippet used for this functionality is as follows: var swap; function run(interval, frames) { var int = 1; ...
I am dealing with an object that has variable key names, each of which contains nested objects. My goal is to perform a depth-first search (DFS) over this object. For example, consider the following object: object = { "var1" : { "var2 ...
Greetings! I have encountered a problem that I am hoping someone can assist me with. I am looking for information or guidance on how to handle a specific issue. The challenge I am facing involves accessing the checked property of a material-ui <Checkbo ...
In my AngularJS app, I am utilizing Visual Studio with separate folders. The AngularJS-min.js file is located in a different folder. My query is how can I correctly reference the AngularJS-min.js file in my app's JavaScript file to enable auto-suggest ...
Currently, I am using a single JavaScript binding in the Master Page for my entire project. However, the Master Page does not include a ScriptManager. This means that some pages have Ajax components, such as UpdatePanel, while others do not. The 'Sys. ...
I am new to creating a gulpfile.js manually for my project based on Backbone and Marionette. My initial gulp file had the following structure: var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserify = require ...
When working on my React-Native project, I noticed that my import paths look something like this: import { ScreenContainer, SLButton, SLTextInput, } from '../../../../../components'; import { KeyBoardTypes } from '../../../../../enums ...
I am looking for a way to preload an entire web page using JavaScript in order to have it cached in the user's browser. While I know how to preload images with JS, my goal is to also preload the entire page itself. For example, on my website, there ...
I noticed that my component under a tab is causing the Textfield to become unresponsive on small screens. To demonstrate this, I checked how the Textfield appears on an iPhone 5/SE screen size. https://i.stack.imgur.com/d8Bql.png Is there a way to make t ...