JS Snippets: Array of Objects
From WikiMLT
References
- Scrimba: JavaScript Interview Challenges
- MLT GitHub: JavaScript Homework Tasks
Example data files
product-data.mjs
export default [
{ product: "#1", type: "sweet", price: 7.54 },
{ product: "#2", type: "savory", price: 2.55 },
{ product: "#3", type: "savory", price: 3.79 }
];
podcast-data.mjs
export default [
{
id: 1,
title: "Stranger Scrims",
duration: 40,
tags: ["supernatural", "horror", "drama"],
},
{
id: 2,
title: "The Scrim of the Dragon",
duration: 60,
tags: ["drama", "fantasy"],
},
{
id: 3,
title: "Scrim Hunters",
duration: 22,
tags: ["reality", "home improvement"],
}
];
airlines-podcast-data.mjs
#Output
export default [
{
id: 1,
title: "Scrimba Podcast",
duration: 50,
tags: ["education", "jobs", "technology"],
hosts: ["Alex Booker"],
rating: 10,
genre: "education",
paid: false
},
{
id: 2,
title: "Crime Fan",
duration: 150,
tags: ["crime", "entertainment", "mature"],
hosts: ["Bob Smith", "Camilla Lambert"],
genre: "true crime",
rating: 5,
paid: true
},
{
id: 3,
title: "Mythical Creatures",
duration: 99,
tags: ["entertainment", "general", "unicorns"],
hosts: ["Esmerelda Shelley", "Duke Dukington", "Felix the Cat"],
genre: "fantasy",
rating: 8,
paid: true
},
{
title: "Crime Crime Crime",
duration: 70,
tags: ["crime", "entertainment", "mature"],
hosts: ["Jessica Jones", "Humphrey Bogart", "Inspector Gadget"],
genre: "true crime",
rating: 6,
paid: true
},
{
title: "Something about Witches",
duration: 35,
tags: ["fantasy", "entertainment"],
hosts: ["Frewin Wyrm", "Evanora Highmore"],
genre: "fantasy",
rating: 8,
paid: false
},
{
title: "Coding Corner",
duration: 55,
tags: ["education", "jobs", "technology"],
hosts: ["Treasure Porth", "Guil Hernandez", "Tom Chant"],
genre: "education",
rating: 9,
paid: false
},
];
Sort Objects by a Property (Price)
import products from "./product-data.mjs";
function sortProducts(data: { product: string, type: string, price: number }[]) {
return data.sort((a, b) => a.price - b.price);
}
Reduce the prices into a Sum
import products from "./product-data.mjs";
function sumPrices(data: { product: string, type: string, price: number }[]) {
return parseFloat(
data.reduce((acc, { price }) => acc + price, 0)
).toFixed(2);
}
Reduce the prices of certain product type into a Sum
import products from "./product-data.mjs";
function sumPrices(data: { product: string, type: string, price: number }[]) {
return parseFloat(
data
.filter(({ type }) => type === "savory")
.reduce((acc, { price }) => acc + price, 0)
).toFixed(2);
}
Filter the Objects by a Property and Map a new Array
import products from "./product-data.mjs";
function sumPrices(data: { product: string, type: string, price: number }[]) {
return data
.filter(({ type }) => type === "savory")
.map(({ item, price }) => ({ item, price }));
}
Get unique Tags from Podcast-data
import products from "./podcast-data.mjs";
function getUniqueTagsForInLoop(data) {
const unqTagsTrack = {};
const unqTagsList = [];
data
.map(({ tags }) => tags)
.flat().forEach(tag => {
unqTagsTrack[tag] = true;
});
for (const key in unqTagsTrack) {
unqTagsList.push(key);
}
return unqTagsList;
}
import products from "./podcast-data.mjs";
function getUniqueTagsWithFilter(data) {
const unqTagsTrack = {};
return data
.map(({ tags }) => tags)
.flat()
.filter(tag => {
if (!unqTagsTrack[tag]) {
unqTagsTrack[tag] = true;
return true;
}
return false;
});
}
Order Movies Length According to a Flight Length
The task. See the Example data above.
Welcome Aboard Scrimba Airlines. Our Scrimba Airlines in-flight entertainment package includes a variety of podcasts. We need to add a feature that suggests podcasts to our patrons based on whether a flight is short or long.
Your sort function should take two arguments: the podcast data and flight length. If the flight is 60 minutes or less, sort the podcast list from shortest to longest. If it's anything else, sort from longest to shortest.
Your function shouldn't return anything. Instead log a numbered list of the title and duration of each podcast to the console, like this:
- Crime Fan, 150 minutes
- Mythical Creatures, 99 minutes
- Crime Crime Crime, 70 minutes
- Coding Corner, 55 minutes
- Scrimba Podcast, 50 minutes
- Something about Witches, 35 minutes
Solution 1: Just order according by the flight duration of 60 mins.
import products from "./airlines-podcast-data.mjs";
function sortByDuration(data, flightLength) {
const lengthBase = 60;
return data
.sort((a, b) => {
if (flightLength > lengthBase) return b.duration - a.duration;
return a.duration - b.duration;
})
.map(({ title, duration }, i) => ({ i, title, duration }))
.forEach(({ i, title, duration }) => {
console.log(`${i + 1}. ${title}, ${duration} minutes`);
});
}
sortByDuration(podcasts, 60);
1. Something about Witches, 35 minutes
2. Scrimba Podcast, 50 minutes
3. Coding Corner, 55 minutes
4. Crime Crime Crime, 70 minutes
5. Mythical Creatures, 99 minutes
6. Crime Fan, 150 minutes
sortByDuration(podcasts, 120);
1. Crime Fan, 150 minutes
2. Mythical Creatures, 99 minutes
3. Crime Crime Crime, 70 minutes
4. Coding Corner, 55 minutes
5. Scrimba Podcast, 50 minutes
6. Something about Witches, 35 minutes
Solution 2: Filter by the flight duration then order.
import products from "./airlines-podcast-data.mjs";
function filterByDuration(data, flightLength) {
return data
.filter(({ duration }) => duration <= flightLength)
.sort((b, a) => a.duration - b.duration)
.map(({ title, duration }, i) => ({ i, title, duration }))
.forEach(({ i, title, duration }) => {
console.log(`${i + 1}. ${title}, ${duration} minutes`);
});
// Remove .forEach() to return the actual Object...
}
filterByDuration(podcasts, 60);
1. Coding Corner, 55 minutes
2. Scrimba Podcast, 50 minutes
3. Something about Witches, 35 minutes
filterByDuration(podcasts, 120);
1. Mythical Creatures, 99 minutes
2. Crime Crime Crime, 70 minutes
3. Coding Corner, 55 minutes
4. Scrimba Podcast, 50 minutes
5. Something about Witches, 35 minutes
