What is the best way to mark a specific photo as a favorite in an array of Photo objects?

I am working with a basic array of photo categories that follows this structure:

[
  {
    category: 1001,
    photos: [
      { id: 100101, url: 'url.com/100101', favorite: false},
      { id: 100102, url: 'url.com/100102', favorite: false}
    ]
  },
  {
    category: 1002,
    photos: [
      { id: 100201, url: 'url.com/100201', favorite: false},
      { id: 100202, url: 'url.com/100202', favorite: false}
    ]
  }
]

If I decide to mark the photo with ID 100201 as a favorite, how can I go about updating my array so that 100201 is now set to favorite: true? I've been attempting to consult the lodash documentation for assistance, but I'm unsure of what exactly to search for.

Any help would be greatly appreciated. Thank you!

javascriptarraystypescript

Answer №1

Assume a scenario where an array is saved in a variable called categories. Based on the data provided, if every photo id shares the same initial category id, then:

function checkCategory(category: string, id: string): boolean {
    return id.substring(0, category.length) === category;
}

function markAsFavorite(photoId: number): void {
    for (let i = 0; i < categories.length; i++) {
        if (checkCategory(categories[i].category.toString(), photoId.toString())) {
            for (let j = 0; j < categories[i].photos.length; j++) {
                if (categories[i].photos[j].id === photoId) {
                    categories[i].photos[j].favorite = true;
                }
            }
        }
    }
}

(code in playground)

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

Tailoring information to fit selected preferences

Currently working on developing a fitness app with Vue, aiming to create personalized workout routines based on user preferences. Users can choose specific options and generate a workout plan by clicking a button. The collected data is stored as an object ...

javascriptvue.js

Arranging a dropdown list of options in alphabetical order using Javascript

Could you assist me in sorting my select list alphabetically? Below is the code I currently have:- $.getJSON("php/countryBorders.geo.json", (data) => { $select.html(""); for (let i = 0; i < data["features"].leng ...

javascriptjqueryjsonfor-loop

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

javascriptangular

What is the best approach to establish multiple global prefixes in a NestJS project?

I am looking to define multiple Global Prefixes for my application such as: admin/products admin/users admin/... api/products api/search api/... shop/products shop/cart shop/... In the main.ts file, I can set a single global prefix using th ...

javascriptnode.jsroutesnestjsprefix

Submit a list of checkboxes selected to Google Sheets separated by commas

Is there a way to modify the script I'm using to enter data from an HTML form into a Google Sheet so that my checkbox fields will be entered as a list, separated by commas? If all boxes were checked in the example form below, I would like the cell fo ...

javascripthtmlformsgoogle-apps-scriptcheckbox

Securing Communication with HTTPS in Express JS

After purchasing an AlphaSSL from a hosting provider, I received the following files: domain.csr.crt domain.interCert.crt domain.PKCS7Cert.crt domain.rootCert.crt domain.X509Cert.crt However, in order to enable HTTPS on Node.JS using Express, I am aware ...

javascriptnode.jsexpresshttps

The JSON response is not being returned by the static React App hosted on Microsoft

Seeking assistance from anyone who may have faced and resolved a similar issue. Our React application is deployed on Azure Static Web App and operates smoothly, but we are stuck on configuring it to return JSON instead of HTML in its responses. Within our ...

javascriptreactjsnode.jsazureazure-static-web-app

Is there a way to transfer parameters from a Vue function to a component?

I am struggling to find the right solution for passing parameters to a function. I need to use NavigateTo to send a String value to my index in order to switch components without using Vue Router. Home.js Vue.component('Home', { props: [&apo ...

javascriptfunctionvue.jsfunction-parameter

Stencil - React Integration Does Not Support Global CSS Styling

As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory. Upon attempting to incorporate my components int ...

javascriptcssreactjsstenciljsstencil-component

TS interfaces: Understanding the distinction between optional and mandatory properties

In this example, I am demonstrating TypeScript interfaces in a simple way: interface A: { id: number; email: string; } interface B extends A { login: string; password: string; } My goal is to have certain requirements when creating objects fr ...

typescriptinterface

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening? Here is an image of my current page https:/ ...

javascriptphphtmlmysqlajax

Create an instance using the window object in JavaScript

Having an issue when trying to instantiate a class using the window object. I have a namespace called UTIL and within it, there is a class defined as follows: var UTIL = { Classes : {}}; UTIL.Classes.ObservationVal = function(state, id, type, context, pe ...

javascriptwindow

What is a Generic Type in an Array?

Currently, I'm working on designing a mockup app that displays data in the form of buttons in a list. I have successfully implemented most of the features but I have encountered a problem. I have initialized an array and another class to manage the da ...

angulartypescriptionic2

Issue with React's handleChange function in two separate components

I need assistance with calling the event handleChange from a second Component This is my principal component: const [mainState, setMainState] = useState({ stepValue: 1, saleDateVal: new Date(), customerVal: '' }); function moveNextStep() { ...

javascriptreactjsreact-hooks

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

javascriptjquerycsshtml

Tips for detecting when a browser is closing in a web application that is integrated with a master page

Currently, I am working on a web application that uses a master page. I need to be able to detect when the user is closing the browser so that I can raise an event to clean up session variables. I attempted using the unload JavaScript event, but it seems ...

asp.netjavascript

The protected routes within a React JS application consistently result in an undefined value

In my ProtectedRoute component for my react application, I am facing an issue with user authentication. I am using react-router-dom v6 to access the token from localStorage, but no matter what, the user variable always returns undefined. import { Outlet, N ...

javascriptreactjsreact-router-dom

ng2-idle server side rendering problem - Uncaught ReferenceError: document is undefined

Can ng2-idle be used for idle timeout/keepalive with pre-rendering in Angular 4? I followed this link for implementation: It works fine without server pre-rendering, but when I add rendering back to my index.html, I keep getting the following error: Exce ...

javascriptangulartypescriptng2-idle

Next.js server component allows for the modification of search parameters without causing a re-fetch of the data

I have a situation where I need to store form values in the URL to prevent data loss when the page is accidentally refreshed. Here's how I am currently handling it: // Form.tsx "use client" export default function Form(){ const pathname ...

javascriptreactjsnext.js

Navigating through the sidebar on Next.js

I am currently exploring how to utilize next.js routes for dynamically populating a sidebar component with route instructions. The goal is to have the main div display the relevant component when a sidebar option is clicked. While I've come across tu ...

javascriptreactjsnext.jsnext-router