Searching for the position of different size values according to their specific value

information = { boxNoTo: 1, boxNoFrom: 1, size: 'M', }

items = [{ size: 'M', },{ size: 'M', },{ size: 'S,M,L,XS', boxNoTo: 1, boxNoFrom: 1, country: 'CA', name: 'Josh' }]

This is what I have done

const INDEX = items.findIndex((x) => {
      if (x.size.split(',').length > 0) {
        return (
          x.size.split(',').filter((y) => y === information['size'])[0] ===
          information['size'] && 
          x.boxNoFrom === information['boxNoFrom'] && 
          x.boxNoTo === information.boxNoTo
        );
      } else {
        return (
          x.size === information['size'] && 
          x.boxNoFrom === information['boxNoFrom'] && 
          x.boxNoTo === information.boxNoTo
        );
      }
    });

My goal is to find the index of

 {
 size: 'S,M,L,XS',
 boxNoTo: 1,
 boxNoFrom: 1,
 country: 'CA',
 name: 'Josh'
        }
javascripttypescript

Answer №1

Here is a possible solution:

const data = { boxNoTo: 1, boxNoFrom: 1, size: 'M', };
const array = [{ size: 'M', },{ size: 'M', },{ size: 'S,M,L,XS', boxNoTo: 1, boxNoFrom: 1, country: 'CA', name: 'Josh' }];


const { size, ...rest } = data;
const index = array.findIndex(item => 
  item.size.split(',').includes(size) 
  && Object.keys(rest).every(key => item[key] === rest[key])
);

console.log(index);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display a single div at a time?

I have a setup with three sections, each containing two divs. The first div has a button that, when clicked, should open the next div while closing any other open div. However, I am facing an issue where clicking the button again does not close the corresp ...

javascriptjquery

Discontinue playing videos embedded in iframes on Dailymotion

I'm currently working on creating a slider that includes videos from multiple providers, and I need to ensure that the videos stop when changing slides. So far, I've successfully implemented this feature for Vimeo and YouTube without making any a ...

javascriptiframedailymotion-api

Selective Circle Appending Techniques

I am having some issues with my bubble chart code. The data file I am working with contains instances where the GDPperCapita and/or LifeExpectancy values are either 0 or NaN, causing problems when appending circles to the chart. I would like to know if th ...

javascripthtmld3.js

Generating charts using JSON data with the help of JavaScript

Hi there! I have a JSON file shown in the first image and I would like to create a chart similar to the one in the second image using JavaScript (using any library). Can anyone provide me with a simple example code on how to achieve this? ...

javascriptjsonchartsbar-chart

Getting the 3D Object Script in Three.js: A Step-by-Step Guide

I've been experimenting with three.js, specifically the Editor feature that allows you to attach scripts to 3D objects. In Unity 3D, accessing a script is as simple as using something like : targetGameObject.GetComponent (scriptName).targetVariable; ...

javascriptthree.js

Sending data from TextBox as json format

JavaScript Code: var latitude = document.getElementById("<%=txt_Lat.ClientID %>").value; var longitude = document.getElementById("<%=txt_Long.ClientID %>").value; var jsonData = {latitude: latitude, longitude: longitude}; var jsonString = JSO ...

javascriptasp.netjsonjson.net

Instructions on invoking a function from one controller within another controller

Is it possible to invoke a function from one controller in another controller? I attempted the following but encountered failure: <div ng-app="MyApp"> <div ng-controller="Ctrl1"> <button ng-click="func1()">func1</button> ...

javascriptangularjsangularjs-controllerangularjs-1.6

Creating a Custom Hot Module Replacement Hook for Vue.js and Webpack

Is there a way to create a hook that triggers when a Vue component is updated using hot module replacement? [HMR] App is up to date. Now I want to execute a specific method after the update. ...

javascriptvue.jswebpackwebpack-hmrhot-module-replacement

What makes React Router distinct as a React component?

What is the reasoning behind react-router being a React Component that utilizes React internally? As routing issues were already addressed before the introduction of React Components? In the case where the path property does not align with the URL path, w ...

javascriptreactjsreact-router

Does LABJS include a feature for executing a callback function in the event of a timeout during loading?

When using LabJS to asynchronously load scripts with a chain of dependencies, if one of the scripts breaks (due to download failure or connection timeout), it seems that the remaining scripts in the chain will not be executed. Is there a way to define a ...

javascriptajaxlabjsasynchronous-loader

Create a dynamic div element using Jquery that is generated based on text input

I am attempting to dynamically insert a div based on the text within the parent container. My HTML structure is as follows: <div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div> <div class="listing_detail ...

javascriptjqueryhtml

What is the technique for anchoring elements at the top of the page when scrolling?

There is a common design feature where the sidebar on the left starts at a lower position on the page, but as you scroll it moves up to the top and remains fixed in place instead of disappearing off the screen. This is a popular design trend that I have ...

javascriptjquerycsshtmlparallax

Tips for making an image box with a rollover effect

I need help figuring out how to create a unique user experience within a container that is 500px wide and 800px tall. The container currently has an image as a background, and I want to add a "sign up" button in the middle. When this button is clicked, I w ...

javascriptimagehtmlwidgetrollover-effect

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

angular .module('ApplicationOne',[]) .controller('myControllerOne', function($scope){ $scope.name = "Luther"; $scope.fname = "Martin"; $scope.ed = "B.TECH"; }); angular .module('App2&apos ...

javascriptangularjs

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...

javascriptvue.jsvuejs3

Unable to access Bootstrap dropdown menu after initial ajax form submission

I am encountering an issue with a dropdown menu on my webpage, specifically within the manager.php file. Please excuse any formatting discrepancies as I am using Bootstrap: <!-- Bootstrap --> <script type="text/javascript" src="https://netdna ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Showcasing solely the latest entry in the database utilizing nodeJS

I am having an issue with my code where it is only displaying the last record from the database. How can I modify it to display all the records from the database using nodeJS? Any assistance would be greatly appreciated. Thank you. var express = require ...

javascriptnode.jsexpress

What is the process for populating dropdown options from state?

I've been struggling to populate a select element with options based on an array in state. Despite trying various methods, the code snippet below seems to be the most detailed (I'm still getting familiar with React after taking a break for a few ...

javascriptarraysreactjs

Embrace the power of Angular2: Storing table information into

Custom table design Implement a TypeScript function to extract data from an array and populate it into a stylish table. ...

angulartypescript

The Vue component does not render the JS Promise and instead displays it as

After setting up a promise that will be returned once a correct event is called with the correct action, I have the following code: import {EventBus} from "./EventBus"; export function completed() { EventBus.$on('queue-action', e => { ...

javascriptvue.jspromisees6-promise