JS Snippets: Array of Objects

JavaScript

Ref­er­ences

• Scrim­ba: JavaScript In­ter­view Chal­lenges
• MLT GitHub: JavaScript Home­work Tasks

Ex­am­ple da­ta 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

#Out­put

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 Ob­jects by a Prop­er­ty (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);
}

Re­duce the prices in­to 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);
}

Re­duce the prices of cer­tain prod­uct type in­to 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);
}

Fil­ter the Ob­jects by a Prop­er­ty and Map a new Ar­ray

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 Pod­cast-da­ta

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;
        });
}

Back Re­cur­sive Search by .find()

useEffect(() => {
    const isCostsArise = !!courses
        ?.find(courseKey => allCourses
            ?.find((courseObj: any) =>
                courseObj.key === courseKey && courseObj.institution_id === 1
            )
        );
    setCostsArise(isCostsArise);
}, [courses]);

// Structure of the data: {}[]
const data = [{
		key: course.id,
		text: course.name,
		value: course.id,
		image: {avatar: true, src: ...},
		institution_id: 0
	},
	key: course.id,
		text: course.name,
		value: course.id,
		image: {avatar: true, src: ...},
		institution_id: 1
	},
	{ ... }
];

Or­der Movies Length Ac­cord­ing to a Flight Length

The task. See the Ex­am­ple da­ta above.

Wel­come Aboard Scrim­ba Air­lines. Our Scrim­ba Air­lines in-flight en­ter­tain­ment pack­age in­cludes a va­ri­ety of pod­casts. We need to add a fea­ture that sug­gests pod­casts to our pa­trons based on whether a flight is short or long.

Your sort func­tion should take two ar­gu­ments: the pod­cast da­ta and flight length. If the flight is 60 min­utes or less, sort the pod­cast list from short­est to longest. If it's any­thing else, sort from longest to short­est.

Your func­tion shouldn't re­turn any­thing. In­stead log a num­bered list of the ti­tle and du­ra­tion of each pod­cast to the con­sole, like this:

1. Crime Fan, 150 min­utes
2. Myth­i­cal Crea­tures, 99 min­utes
3. Crime Crime Crime, 70 min­utes
4. Cod­ing Cor­ner, 55 min­utes
5. Scrim­ba Pod­cast, 50 min­utes
6. Some­thing about Witch­es, 35 min­utes

So­lu­tion 1: Just or­der ac­cord­ing by the flight du­ra­tion 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

So­lu­tion 2: Fil­ter by the flight du­ra­tion then or­der.

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

Reg­is­ter: JavaScript

Идентифициране

Разработване

Авторизиране

Утвърждаване

Spas

Spas

Spas

Spas

11.03.2023

11.03.2023

11.03.2023

14.03.2023

32394

32396

32398 

32443