I currently have a function that returns a value for each item in my array, up to a maximum number. It looks like this
const myArray = [
{ url: "example.com/1", other: "foo" },
{ url: "example.com/sdf", other: "foo" },
{ url: "example.com/blue", other: "foo" },
{ url: "example.com/foo", other: "foo" },
{ url: "example.com/123", other: "foo" },
];
function getNumberOfUrls(data, num) {
const newArray = [];
data?.forEach(function (datum) {
if (newArray.length < num) {
newArray.push(datum.url);
}
});
return newArray;
}
// Output
//["example.com/1", "example.com/sdf", "example.com/blue"]
It simply returns the url for each object in the array until it hits the limit provided. It works fine, but I was trying to explore if there is a more suitable Array function I should be using.
I know Array.filter creates a new array based on whether the iterated item passes a particular condition, but I wondered if it could be used to check whether something else passes the condition - in this case the parent array.
function getNumberOfUrls(data, num) {
return data.filter(datum => /* return url until we hit .length === num in data? */ )
};
How can I make this work or is there a better-suited Array method to achieve this?
ETA: the original example array didn't paint the full picture. I've now added more data to show the issue. I don't want to return an array with just the first three objects, I want to just return the url value from the first three objects.
The shortest way to do this is using Array.slice:
const myArray = [
{ url: "example.com/1" },
{ url: "example.com/sdf" },
{ url: "example.com/blue" },
{ url: "example.com/foo" },
{ url: "example.com/123" },
]
const limit = 3
const shorterArray = myArray.slice(0, limit).map(item => item.url)
console.log(shorterArray)I removed my other code, as it was inefficient, and should not be used.
One approach would be use Array.from() and it's internal mapper
const myArray = [
{ url: "example.com/1" },
{ url: "example.com/sdf" },
{ url: "example.com/blue" },
{ url: "example.com/foo" },
{ url: "example.com/123" },
];
function getNumberOfUrls(data, num) {
return Array.from({length:num}, (v,i) => data[i].url)
}
console.log(getNumberOfUrls(myArray, 3))You could simply set the length of the newly mapped array
Edit: The .map() is used as the final array is different to the starting array (just urls in final as opposed to objects in starting array)
const myArray = [
{ url: "example.com/1" },
{ url: "example.com/sdf" },
{ url: "example.com/blue" },
{ url: "example.com/foo" },
{ url: "example.com/123" },
];
function getNumberOfUrls(data, num) {
let newArray = data.map(el => el.url);
newArray.length = num;
return newArray;
}
console.log(getNumberOfUrls(myArray, 3))