In a Vue component, use JavaScript to assign the data property in object 2 to object 1 when their keys match

Could use some assistance here as I believe I'm getting close to a solution,

I have a form object that needs updating based on matching keys with an imported object.

For example, form.title should be set to the value in article.title.

I've attempted the following, but I'm struggling with how to set this.form[key][value] to this.article[articleKey][articleValue].

Object.entries(this.form).forEach(([key, value]) => {
    Object.entries(this.article).forEach(([articleKey, articleValue]) => {
        if ([articleKey][0] === [key][0]){
            //[value] = [articleValue];
            //this.form[key][value]=this.article[articleKey][articleValue]
        }
    });

Any insights would be greatly appreciated, I'm new to JavaScript. I specifically want to update the data properties in the form without cloning the object and bring in all the data from the article object.

Response to a comment - example of the form

form: new Form({
    title: '',
    description: '',
    earliest_date:'',
    latest_date:'',
    image_file_names:[]
})

Example of the Article object

{"id":21,
    "owner_id":1,
    "title":"test1",
    "description":"Test It",
    "earliest_date":"2020-06-01",
    "latest_date":"2020-06-06",
    "image_file_names":"[\"1593530083background.jpg\", 
     \"159353008520190713_085629.jpg\"]",
     "physical_description":"Test 1"}
javascriptvue.jsobject

Answer №1

My initial assumption was incorrect - I thought assigning a value to a key was incorrect, but it actually sets the value of that key as intended.

            Upon further review of the code, the logic loops through the entries of the 'form' object and 'article' object to match and set corresponding values.
                if the keys match, it assigns the value of the 'article' object to the 'form' object.
            });
            });

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

Tips for updating the firebase access_token with the help of the next-auth credentials provider

Can anyone help me with refreshing the Firebase access token when it expires? I need the token for API authentication, but I can't find any information online regarding next-auth and Firebase. Currently, I am able to retrieve the access token but str ...

javascriptfirebasenext.jsfirebase-authenticationnext-auth

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

javascripthtmljquery

utilizing the setState function to insert an object into a deeply nested array

Currently, I am utilizing iReact setState to attempt posting data to my object which consists of nested arrays. Below is how my initial state looks: const [data, setData] = useState({ working_hours: [ { id: '', descrip ...

javascriptreactjs

Handling events for components that receive props from various components in a list

In my code, I have a component called PrivateReview which includes event handlers for updating its content. export default function PrivateReview(props) { const classes = useStyles(); const removeReviewAndReload = async () => { await ...

javascriptreactjsmaterial-ui

Exploring the Integration of jQuery AJAX in a Contact Form

I would like to incorporate AJAX functionality into a contact form. Here is the current code I have... $("#contact_form").validate({ meta: "validate", submitHandler: function (form) { $('#contact_form').hide(); ...

phpjavascriptjquery

JavaScript module encounters an uncaught error: Attempting to assign a value to a constant variable

In another module, I defined a variable in the following manner: // module1.js let directory; export { directory }; Now, I am trying to access it in a separate module like so: // module2.js import { directory } from '../js/module1.js'; directo ...

javascriptthree.js

Using Node.js in conjunction with Nuxt.js: a beginner's guide

I have a server.js file located in the "Server" directory, which is connected to Nuxt.js server.js const express = require('express'); const app = express(); app.get('/api/data', (req, res) => { res.json({ message: 'Hello fr ...

node.jsvue.jsvuejs3nuxt.jsnuxtjs3

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Is there a way to update text on an HTML document without reloading the entire page? I'm looking to create a simple "cart" functionality with 5 links on a page. When a link is clicked, I want it to increment the "items in cart" counter displayed on th ...

javascriptjavahtmljsp

Displaying JSON keys and values individually on an HTML page

Looking to display a JSON array in HTML using ngFor TypeScript : import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-for', templateUrl: './ng-for.component.html', styleUrls: ['./ng-for ...

javascripthtmlangular

Perform the same actions on every element within the ul li

I'm facing an issue with my unordered list, where each list item contains a span element with an image inside. My goal is to set the background-image of each span to be the same as the image it contains, while also setting the opacity of the image to ...

javascripthtmljquerycsshtml-lists

How to insert a new document into a MongoDB collection with Mongoose

Consider a scenario where my existing collection called fruits is structured as follows: {"_id" : ObjectId("xyz...."), "name" : "Apple", "rating" : 7} {"_id" : ObjectId("abc...."), " ...

javascriptnode.jsdatabasemongodbmongoose

having trouble loading marker in react leaflet within next.js

I am facing difficulty in implementing react leaflet Marker in my next.js project. Below is the code snippet where I have included my map component: const MapSearch = dynamic(import('../../components/Map'), { ssr: false, loading: () => ( ...

javascriptreactjsleafletnext.jsreact-leaflet

Exploring SVG Morphing Reversal Techniques in Anime.js

I have been trying to implement direction: 'reverse' and timeline.reverse(), but so far it hasn't been successful. Interestingly, when I set loop: true, the reverse animation can be seen within the loop. However, my goal is to trigger this a ...

javascriptanimationvue.jssvganime.js

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

javascripthtmljquery

Most effective method for streamlining conditional checks in JavaScript

To enhance the quality of my code and improve its readability, I have decided to implement a currying functions approach and create pure helper functions for repetitive code snippets. One issue I noticed was the frequent existence/type checks throughout my ...

javascriptoptimizationfunctional-programmingparameter-passingpurely-functional

Adjusting the quantity of buttons in real-time following an ajax request

Creating buttons dynamically in an Ajax success function can be a challenge when the number of buttons varies each time. I am able to create the buttons, but since the exact number is unknown, adding the correct number of button listeners becomes tricky. ...

javascripthtmlajax

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

javascripthtmlnode.jselectron

Unable to Display Embed Request Using Javascript in IE9 and IE10

My website allows users to embed content they create on the site into their own blogs or pages using a series of embeds. Here is the code we provide them: <script src="[EMBED PROXY URL]" type="text/javascript"></script> When this code calls ...

javascriptinternet-exploreriframeinternet-explorer-9internet-explorer-10

Leveraging the package.json file to execute a separate script within the package.json file

Within my project's package.json file, I have a script called npm run script1. Additionally, my project includes a private npm package as a dependency, which contains its own set of scripts in its package.json file, including one named script2. My goa ...

javascriptnode.jsreactjsnpm

Exploring the Concepts of PHP Classes

I am currently exploring the predefined classes in PHP and learning how to effectively utilize them. It is important for me to accurately describe these entities, like the DateTime class. Upon observing a method within the DateTime class denoted as DateTi ...

phpobjectbuilt-in