Bind input value to specific value in object

Question

I'm trying to build a timesheet application where users can enter the amount of hours they are working each day. I'm storing the data about each user in an object and I wish to populate an input field in a table with each respective hour (duration). To illustrate how I want to store the data, I added an image: https://i.sstatic.net/tUHUx.jpg

And also a fiddle: https://jsfiddle.net/h64wafkp/14/

Basically, each user in the database has a one-to-many relationship with another table called "hours", so the data structure looks as such:

 {
"id": 1,
"firstname": "JayZ",
"lastname": "Carter",
"email": "[email protected]",
"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
  }
]

},

Then there's the table itself which is just a regular html table with each respective day as column headers. My issue is how to bind each duration to each respective date cell (see image above). Any suggestions?

you need to find a way to bind those hours' object values. The issue is that you're using an array of objects, with dates inside that object. The way to link the correct time object using the date as a key is inefficient (requires n^2). There's also no guarantee that there is only one entry per date. I think it would be worthwhile figuring out that particular piece, otherwise the function to support this schema may be too complex. — Daniel
– Daniel, Commented Dec 13, 2018 at 20:28
Any idea how I could do it? Been stuck on this for the last 4 months or so.. would be great if there was a library/ui component for this. Unfortunately I can't find a datatable for this type of behavior — erikvm
– erikvm, Commented Dec 13, 2018 at 20:29
There likely isn't one. It seems to me like an issue with the schema. if you restrict it to a single entry per date (per user). you could use the date as a key. You can also set up a computed to figure this out for existing entries, but it won't be able to add new values just using bind. — Daniel
– Daniel, Commented Dec 13, 2018 at 20:36

trincot · Accepted Answer · 2018-12-13 21:21:10Z

2

In your methods define a function to get the duration for a given 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;
},

Then in the HTML part add a :value attribute to the input element:

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

If you need to also bind updates to those input values back to the data structure, you'll need to define a function setDuration and call it with the following input attribute:

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

You would again locate the user and hour as above, but then you need to possibly add an hour object to the hours array, where you need a new id. I don't know how you would generate new id values in your case, so I'll leave that for you to implement (see 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
        });
    }
},

After our exchange below it turns out that your ORM will recognise an hour record needs to be inserted (instead of updated) if there is no id property, so in that case just omit the line:

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

edited Dec 13, 2018 at 21:21

answered Dec 13, 2018 at 20:47

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

erikvm Over a year ago

Regarding the setDuration. part. I'm sending all my data to a postgres db through my rest api. The update/insert function can accept two different structures, either by providing an id (hour id) or user_id. Basically like this: imgur.com/a/g2YAfx3 If the first object is sent (with id), it'll update an existing hour row with id 181 and if I provide a user_id, it'll post a new hour to the user that has an id of 12 and automatically asign it an id (auto incremented)

trincot Over a year ago

In that case you can omit the id: getNewId() line, and apply the appropriate logic where you send updates to your db, i.e. you choose the appropriate structure based on whether the hour object has an id property (= update) or not (=insert).

erikvm Over a year ago

It works almost out of the box with your solution since I can actually send the data with both id and user_id - the ORM I'm using understands that it should update if both id and user_id are found. However, I tried adding a new object in my data property called hoursToSubmit (which is just equal to user.hours in setDuration) - The only thing is that if I add a value in an input field for user 1, and then another value for user 2, my hoursToSubmit only reflects the changes made for user 2 - can I use $set or something to store all inputs across all users?

trincot Over a year ago

This really is a new question. Could you post it as such and provide the object structure with that property, and explanation of the problem?

erikvm Over a year ago

Sure - here's a short snippet of what I wish to achieve: vimeo.com/306271901 Essentially, I want all inputs across all rows saved so I can submit all to my database. Notice how the object with inputs only reflect the user that had the latest input changed

|

Collectives™ on Stack Overflow

Bind input value to specific value in object

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related