Discover the initial two instances of a specific element within a collection of javascript objects

Question

Discover the initial two instances of a specific element within a collection of javascript objects

Within my javascript arraylist, I am currently storing the following elements:

list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
]

My question is how can I filter the array to retrieve only the first 2 occurrences of the element "header"?

The expected output would be:

list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""}
]

I'm looking for a feasible and efficient solution to achieve this using javascript.

javascript arrays

Answer 1

Answer №1

To extract non-header items from the array, you can filter it based on the count parameter. If a header item is encountered, decrement the count.

const
    topHeaders = (array, count = 2) =>
        array.filter(({ header }) => count && (!header || count--));

console.log(topHeaders([]));
console.log(topHeaders([{ header: "header1" }]));
// Other test cases...

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To extract non-header items from the array, you can filter it based on the count parameter. If a header item is encountered, decrement the count.

const
    topHeaders = (array, count = 2) =>
        array.filter(({ header }) => count && (!header || count--));

console.log(topHeaders([]));
console.log(topHeaders([{ header: "header1" }]));
// Other test cases...

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Here is a custom solution just for you.

let count = 0;
const searchKey = 'header';
const resultList = [];
for(let index=0; index<list.length; index++)
{
    const object = list[index];
    for(const property in object)
    {
        if(property === searchKey)
        {
            resultList.push(object);
            count++;
        }
    }
    if(count === 2)
    {
        break;
    }
}

Your desired output will be stored in resultList.

Answer 4

Here is a custom solution just for you.

let count = 0;
const searchKey = 'header';
const resultList = [];
for(let index=0; index<list.length; index++)
{
    const object = list[index];
    for(const property in object)
    {
        if(property === searchKey)
        {
            resultList.push(object);
            count++;
        }
    }
    if(count === 2)
    {
        break;
    }
}

Your desired output will be stored in resultList.

Answer 5

Answer №3

Your code is presented below:

 var list = [{header: "header1", code: ""}, {label: "label1", price: 10}, {header: "header2", code: ""}, {header: "header3", code: ""}, {header: "header4", code: ""}];

     var j = 0;
     list = list.filter((ar, i) => {
 if(ar.hasOwnProperty('header') && j < 2){
j++;       
return ar;
     }
     });

     console.log(list);

Answer 6

Your code is presented below:

 var list = [{header: "header1", code: ""}, {label: "label1", price: 10}, {header: "header2", code: ""}, {header: "header3", code: ""}, {header: "header4", code: ""}];

     var j = 0;
     list = list.filter((ar, i) => {
 if(ar.hasOwnProperty('header') && j < 2){
j++;       
return ar;
     }
     });

     console.log(list);

Answer 7

Answer №4

To simplify the process, filter the list and extract the first two elements as shown below.

const  list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
];

const headersArray = list.filter((item) =>
  item.header
).slice(0, 2);


console.log("The extracted headers are ", headersArray)

Answer 8

To simplify the process, filter the list and extract the first two elements as shown below.

const  list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
];

const headersArray = list.filter((item) =>
  item.header
).slice(0, 2);


console.log("The extracted headers are ", headersArray)

Answer 9

Answer №5

In this code snippet, I am adding objects to a new array one by one while keeping track of the number of objects with a header. If the count of objects with a header reaches 2, the process stops.

const list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
], maxHeader = 2
let result = [], headCounter = 0
list.forEach(item => {
  if (headCounter < maxHeader){
    if (item.header) headCounter++
    result.push(item)
  }
})
console.log(result)

Answer 10

In this code snippet, I am adding objects to a new array one by one while keeping track of the number of objects with a header. If the count of objects with a header reaches 2, the process stops.

const list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
], maxHeader = 2
let result = [], headCounter = 0
list.forEach(item => {
  if (headCounter < maxHeader){
    if (item.header) headCounter++
    result.push(item)
  }
})
console.log(result)

Answer 11

Answer №6

Applying Reduce method :

list.reduce(function (accumulator, currentValue) {

if(accumulator.length < 3 && currentValue.hasOwnProperty('title')){
  accumulator.push(currentValue);
}
 return accumulator;
}, []);

Answer 12

Applying Reduce method :

list.reduce(function (accumulator, currentValue) {

if(accumulator.length < 3 && currentValue.hasOwnProperty('title')){
  accumulator.push(currentValue);
}
 return accumulator;
}, []);

Answer 13

Answer №7

The following code snippet is tailored for your specific scenario.

const items = [
    {title: "Item 1", quantity: 2, price: 10},
    {title: "Item 2", quantity: 1, price: 20}
]

let totalItems = 0
let totalPrice = 0

items.map(item => {
    if(item["quantity"]){
        totalItems += item.quantity;
    }
    
    if(item["price"]){
        totalPrice += (item.quantity * item.price);
    }
})

console.log("Total items: ", totalItems)
console.log("Total price: $", totalPrice)

Answer 14

The following code snippet is tailored for your specific scenario.

const items = [
    {title: "Item 1", quantity: 2, price: 10},
    {title: "Item 2", quantity: 1, price: 20}
]

let totalItems = 0
let totalPrice = 0

items.map(item => {
    if(item["quantity"]){
        totalItems += item.quantity;
    }
    
    if(item["price"]){
        totalPrice += (item.quantity * item.price);
    }
})

console.log("Total items: ", totalItems)
console.log("Total price: $", totalPrice)

Answer 15

Answer №8

const newArray = [];
let counter = 0;
for(let index = 0, length = data.length; index < length; index++) {
    if(counter >= 2){
        break
    }
    data[index]['header'] ? counter++ : '';
    newArray.push(data[index]);
}

console.log(newArray);

I trust this aids you in your endeavors!

Answer 16

const newArray = [];
let counter = 0;
for(let index = 0, length = data.length; index < length; index++) {
    if(counter >= 2){
        break
    }
    data[index]['header'] ? counter++ : '';
    newArray.push(data[index]);
}

console.log(newArray);

I trust this aids you in your endeavors!

Answer 17

Answer №9

Here are the steps to achieve this:

Utilize the filter() method to extract all elements with the property header
Apply the findIndex() function on the array list to locate the desired element 2.
Use the slice() method to obtain a portion of the array starting from the initial header until the required header, determined by passing the index discovered through findIndex to the slice()

const list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
]

const getItems = (arr,num) => list.slice(0,arr.findIndex(a => a === arr.filter(x => x.hasOwnProperty('header'))[num-1])+1)

console.log(getItems(list,2));
console.log(getItems([ {header: "header1", code: ""}, {header: "header2", code: ""}],2));

Answer 18

Here are the steps to achieve this:

Utilize the filter() method to extract all elements with the property header
Apply the findIndex() function on the array list to locate the desired element 2.
Use the slice() method to obtain a portion of the array starting from the initial header until the required header, determined by passing the index discovered through findIndex to the slice()

const list = [
 {header: "header1", code: ""},
 {label: "label1", price: 10},
 {header: "header2", code: ""},
 {header: "header3", code: ""},
 {header: "header4", code: ""}
]

const getItems = (arr,num) => list.slice(0,arr.findIndex(a => a === arr.filter(x => x.hasOwnProperty('header'))[num-1])+1)

console.log(getItems(list,2));
console.log(getItems([ {header: "header1", code: ""}, {header: "header2", code: ""}],2));

Discover the initial two instances of a specific element within a collection of javascript objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Learn the steps to retrieve a user's profile picture using the Microsoft Graph API and showcase it in a React application

Searching for root words in elasticsearch

Is there a way to reset the dynamic flexslider when a click event occurs?

How can I determine the data type of an Array element contained within an Interface member?

The order in which JavaScript files are loaded is critical, especially when dealing with external

Converting JSON objects into datetime: A step-by-step guide

Recursive routing in NodeJS using Express

How to assign keys and values to array elements in PHP

Button to save and unsave in IONIC 2

Tips for resuming a video playback in HTML5 after pausing it for a brief moment

Guide to importing multiple controllers using express

Utilizing Async / Await in the created lifecycle hook - Vue2

Complete the dynamic form submission in a non-blocking manner

Is there a way to randomly change the colors of divs for a variable amount of time?

Tips for converting the Instagram cURL post request to a JavaScript request

How can I efficiently update child states within a parent class using ReactJS?

The pagination in Laravel Vue is causing a validation error due to an invalid prop type check failing

What are some alternative ways to link a local MongoDB database to my Android Studio application instead of using MongoLab?

The functionality of HTML5 canvas image objects is not functioning as expected

What's the best way to update the value of an angular field upon submission?