Update and change the property based on a condition in Ramda without the need for a lens

I am looking to modify properties for an object in ramda.js without using lenses.

Given the data provided, I need to:

If objects in array properties in a and b do not have the property "animationTimingFunction", then add the property key "easing" with a value of ease

If the objects do have the property "animationTimingFunction", rename this property to "easing" while keeping the original value.

Input data:

let data = {
    "a": [{
        "opacity": "1",
        "offset": "0"
    }, {
        "opacity": "0",
        "offset": "0.25",
        "animationTimingFunction": "linear"
    }, {
        "opacity": "1",
        "offset": "0.5"
    },
    "b": [{
        "transform": "scale3d(1, 1, 1)",
        "offset": "0"
    }, {
        "transform": "scale3d(1.05, 1.05, 1.05)",
        "offset": "0.5"
    }, {
        "transform": "scale3d(1, 1, 1)",
        "offset": "1"
    }]
};

Output should be:

let data = {
    "a": [{
        "opacity": "1",
        "offset": "0",
        "easing": "ease"
    }, {
        "opacity": "0",
        "offset": "0.25",
        "easing": "linear"
    }, {
        "opacity": "1",
        "offset": "0.5",
        "easing": "ease"
    },
    "b": [{
        "transform": "scale3d(1, 1, 1)",
        "offset": "0",
        "easing": "ease"
    }, {
        "transform": "scale3d(1.05, 1.05, 1.05)",
        "offset": "0.5",
        "easing": "ease"
    }, {
        "transform": "scale3d(1, 1, 1)",
        "offset": "1",
        "easing": "ease"
    }]
};

I have attempted a solution but I'm missing the condition part:

    let convertEasing = (data) =>{
        let convert = data => R.assoc('easing', 'linear');
        let result = R.map(R.map(convert(data)), data)
        return result;
    };
javascriptramda.js

Answer №1

What about this alternative approach?

const transformObject = obj => {
  const transitionEase = prop('animationTimingFunction', obj) || 'ease';
  return dissoc('animationTimingFunction', assoc('easing', transitionEase, obj));
}

map(map(transformObject))(data);

For a more point-free solution, consider the following:

const transformObject = pipe(
  chain(assoc('easing'), pipe(prop('animationTimingFunction'), defaultTo('ease'))),
  dissoc('animationTimingFunction')
)

In my opinion, the readability of the latter option is somewhat diminished.

You can test either implementation using the Ramda REPL provided.

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

employing ajax for handling a form

Currently, I am facing an issue with updating a user's email on a page. The div refreshes upon submission as intended, but the database is not being updated, and I can't figure out why. My layout consists of a single page where clicking a menu l ...

phpjavascriptmysqlajax

Managing the appearance of one DOM element using another DOM element

Hey there, I'm currently working on an Angular Material tooltip implementation. When I hover over my span element, the tooltip appears. Now, I'm wondering how I can dynamically change the background color of the tooltip based on certain condition ...

javascripthtmlcssangularangular-material2

What are some ways I can effectively implement Tanstack Query's useMutation function?

I am trying to implement useMutation similar to useQuery in my code. However, I encountered an issue where the data is returning as undefined and isError is false. Can anyone help me understand why this is happening and how I can resolve it? `import { us ...

javascriptreactjsaxiostanstackreact-query

The type string[] cannot be assigned to type 'IntrinsicAttributes & string[]'

I'm attempting to pass the prop of todos just like in this codesandbox, but encountering an error: Type '{ todos: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'. Property 'todos' does not ex ...

javascriptreactjstypescript

Retrieve the targeted row from the table and then employ a function

Here is a datatable that I am working on: http://jsbin.com/OJAnaji/15/edit I initially populate the table with data and display it. Then, I add a new column called "kontrole." data = google.visualization.arrayToDataTable([ ['Name', &apo ...

javascriptjqueryhtmlgoogle-visualization

Ways to determine if an image has a designated width/height using JavaScript (jQuery)

Similar Question: How can I retrieve the height and width of an image using JavaScript? Typically, we can determine the image width using $('img').width() or $('img').css('width') when a width is specified as shown below ...

javascriptjqueryimagedimensions

Tips for incorporating JavaScript into your Selenium WebDriver workflow using Java

Looking to integrate JavaScript with WebDriver (Selenium 2) using Java. After following a guide listed on the Getting Started page, I found an initial instruction to run: $ ./go webdriverjs Curious about the specific folder/location where the above ...

javajavascriptselenium-webdriver

Using Formik: When the initial value is changed, the props.value will be updated

After the initial props are updated, it is important to also update the values in the forms accordingly. export default withFormik({ mapPropsToValues: (props: Props) => { return ( { id: props.initialData.id, ...

javascriptformsreactjstypescriptformik

FlexSlider in WordPress is failing to display captions

Before pointing out any similar questions, please note that the answer from those sources does not apply to my specific code. I am trying to achieve this through a function as outlined here But I am struggling to figure out how to add captions only if th ...

javascriptphpjquerywordpressflexslider

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

Seeking help with the following issue: "Argument of type 'string | undefined' is not assignable to parameter of type" I am unsure how to resolve this error. Here is the section of code where it occurs: export interface IDropDown { l ...

javascriptreactjstypescriptjavascript-objects

The form response values consistently show as undefined, attempting to send them to the backend with no success so far after trying two different approaches

I've tried approaching this issue in two different ways, but both times I end up with a value of "undefined" instead of the user input from the form. Just to give some context, I'm using material UI forms for this project. The first approach inv ...

javascriptreactjsmaterial-ui

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

javascripthtmlcss

regular expression for replacing only alphanumeric strings

I'm currently developing a tool that tags alphanumeric words based on the option selected from the right-click context menu. However, I am facing issues when a group of words containing special characters is selected. I have been using the following ...

javascriptregex

External JavaScript files cannot be used with Angular 2

I am attempting to integrate the twitter-bootstrap-wizard JavaScript library into my Angular 2 project, but I keep encountering the following error: WEBPACK_MODULE_1_jquery(...).bootstrapWizard is not a function I have created a new Angular app using a ...

javascriptangulartypescript

JavaScript: A guide to substituting specific characters in a string

I attempted to extract a list of names from a URL as URL parameters. var url_arrays = [],url_param; var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for (var i = 0; i < url.length; i++) ...

javascriptregex

When a td element is clicked, the Textbox will also be clicked

Similar Question: Dealing with jQuery on() when clicking a div but not its child $(oTrPlanning).prev().children('td').each(function () { this.onclick = setCountClick; }); When a TD element is clicked, the function setCountClick() i ...

javascriptjqueryhtmlcss

What is the most effective way to condense these if statements?

I've been working on a project that includes some if statements in the code. I was advised to make it more concise and efficient by doing it all in one line. While my current method is functional, I need to refactor it for approval. Can you assist me ...

javascriptreactjstypescript

Error: Variable 'err' is undefined in Node.js

Why am I getting a ReferenceError: err is not defined even though it is supposed to be defined here? const sampleObject = require('./sampleObject'); const sampleModel = (callback) => { if (true) { sampleObject.sampleRetrieval(err ...

javascriptnode.jsexpress

issues with jasmine angularjs tests exhibiting erratic outcomes

During the execution of my unit tests, I often encounter a scenario where some random test(s) fail for a specific controller without any apparent reason. The error messages typically look like this: Expected spy exec to have been called with [ Object({}) ...

javascriptarraysangularjsunit-testingrecursion

What is the process for dynamically incorporating JavaScript files during compilation to serve as input for browserify?

Within our project's structure, there exists a directory housing multiple js files. The possibility of adding or removing these files later on is present. Currently, we have a file named main.js where each file is imported and a map is created (using ...

javascriptnpmbrowserify