Connect user input to a predefined value within an object

Question

Connect user input to a predefined value within an object

I am currently working on developing a timesheet application that allows users to input the number of hours they work daily. The user data is stored in an object, and I aim to display each user's hours (duration) in an input field within a table. An image demonstrating the desired data structure can be found here: https://i.sstatic.net/tUHUx.jpg

You can also view a fiddle of the project here: https://jsfiddle.net/h64wafkp/14/

In this database, each user has a one-to-many relationship with another table named "hours". Here is an example of the JSON data structure:

 {
"id": 1,
"firstname": "JayZ",
"lastname": "Carter",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd5dec6ffcdd0dcded9dac7ded0d2">[email protected]</a>",
"hours": [
  {
    "id": 226,
    "user_id": 1,
    "date": "2018-12-05",
    "duration": 140
  },
  {
    "id": 1,
    "user_id": 1,
    "date": "2018-12-02",
    "duration": 13
  },
  {
    "id": 2,
    "user_id": 1,
    "date": "2018-12-03",
    "duration": 13
  }
]

},

The table itself is a standard HTML table with each day as column headers. My challenge lies in linking each duration to the corresponding date cell (refer to the above image). Any advice or suggestions would be appreciated.

javascript vue.js

Answer 1

Answer №1

Create a function within your methods to retrieve the duration for a specific user and date:

getDuration(user_id, date) {
    const user = this.users.find(user => user.id == user_id);
    const hour = user.hours.find(hour => hour.date == date);
    return hour ? hour.duration : 0;
},

Next, include a :value attribute in the HTML part of the input element:

:value="getDuration(user.id, day)"

If you want to enable updates to these input values that reflect back on the data structure, define a function setDuration and use the following attribute with the input tag:

@input="e => setDuration(user.id, day, e.target.value)"

In order to update the user's hours array as needed, you may have to add a new hour object with a unique id value. If you're unsure how to generate new id values, you'll need to implement that functionality yourself (refer to the comment):

setDuration(user_id, date, duration) {
    const user = this.users.find(user => user.id == user_id);
    const hour = user.hours.find(hour => hour.date == date);
    if (hour) {
        hour.duration = duration;
    } else {
        user.hours.push({
            id: getNewId(), // <--- implement this!
            user_id,
            date,
            duration
        });
    }
},

Following our discussion, it appears that if there is no existing id property, your ORM will understand that an hour record should be inserted rather than updated. In such cases, you can simply remove the line:

            id: getNewId(), // <--- implement this!

Answer 2

Create a function within your methods to retrieve the duration for a specific user and date:

getDuration(user_id, date) {
    const user = this.users.find(user => user.id == user_id);
    const hour = user.hours.find(hour => hour.date == date);
    return hour ? hour.duration : 0;
},

Next, include a :value attribute in the HTML part of the input element:

:value="getDuration(user.id, day)"

If you want to enable updates to these input values that reflect back on the data structure, define a function setDuration and use the following attribute with the input tag:

@input="e => setDuration(user.id, day, e.target.value)"

In order to update the user's hours array as needed, you may have to add a new hour object with a unique id value. If you're unsure how to generate new id values, you'll need to implement that functionality yourself (refer to the comment):

setDuration(user_id, date, duration) {
    const user = this.users.find(user => user.id == user_id);
    const hour = user.hours.find(hour => hour.date == date);
    if (hour) {
        hour.duration = duration;
    } else {
        user.hours.push({
            id: getNewId(), // <--- implement this!
            user_id,
            date,
            duration
        });
    }
},

Following our discussion, it appears that if there is no existing id property, your ORM will understand that an hour record should be inserted rather than updated. In such cases, you can simply remove the line:

            id: getNewId(), // <--- implement this!

Connect user input to a predefined value within an object

Answer №1

Similar questions

Ways to modify Angular pipe without specifying data types

Issue encountered with search.run().getRange function when accessing a stored search in suitescript 2.0

Tips for maintaining an updated array's consistency on page refresh in Vue.js?

`How can I make Vue listen for events?`

Tips for eliminating the trailing slash from the end of a website article's URL

The .prepend() method receives the variable returned by ajax and adds it

django, the X-CSRFToken in the request header is improperly configured

What is the best way to update a CSS href using window.open with JavaScript?

Encountering an issue with Angular directive attributes

How can JavaScript transform Unicode strings?

Issue encountered with Electron's Puppeteer: "equire is not defined" and "__dirname is not defined"

Can you verify that the client's date and time locale are accurate in JavaScript before proceeding with processing?

Sending a POST request to a PHP file in React: A Step-by-Step Guide

What is the appropriate content-type to use when sending AJAX POST data?

CSS Only Sidebar Dropdown (without using Bootstrap)

Record the actions emitted by child components

Creating interactive popups using Web Map Service (WMS) with the

Having trouble displaying the output on my console using Node.js

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

Customizing upload directories in elfinder for dynamic path generation