Question 100567 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Object as a checkbox value

I have an array of objects and I map through them.

    {alltasks.map((task) => (
    <div key={task.task}>
        <input type="checkbox" name="task" id={task.task} value={task} className="hidden peer check" />
        <label for={task.task} className="inline-flex items-center justify-between w-full p-5 text-white bg-transparent border-2 border-slate-600 rounded-lg cursor-pointer peer-checked:border-emerald-500 hover:border-emerald-700">                           
            <div>
                <img src={task.img} alt="" />
                
                <div className="w-full text-sm mt-2">ID: {task.task}</div>
            </div>
        </label>
    </div>
            
    ))}

Each object will now have its own checkbox. I set the checbox’s value as the object, so I can use it later.

On submit I want to get all checked checbox’s values, so I can store them in an array.

    <form className="w-full taskForm" onSubmit={(e) => {
        e.preventDefault()
        const checkedBoxes = document.querySelectorAll('input[name=task]:checked');
        checkedBoxes.forEach((box) => {
            console.log(box.value)
        })
        stateChanger(false)
    }}>

But all I get back is [object Object] not the actual object. How can I get back the actual objects?

Tags:

2

Answers


  1. 0

    It seems like you are using React?

    Your problem is that you try to assign something that isn’t a string to a value on an input field. JavaScript will atomatically try to make the object into a string giving back [Object.object].

    You are already on to the solution since you use key and id with values task.task.

    Set the value to task.task as well and see what happens.

    If you need to look up the object again after reading the value use something like:

    allTasks.find(x => x.task = task)

    to get the object back from the value.

    Login or Signup to reply.
  2. 0

    I think you should rather set the value of the checkbox to be a unique Id or the task.task value, and then after getting your checkboxes, you can loop over each checkbox and find the object with that unique value/id from the alltasks array

    {alltasks.map((task) => (
<div key={task.task}>
    <input type="checkbox" name="task" id={task.task} value={task.task} className="hidden peer check" />

          {/* REST OF CODE HERE */}

        </div>
    </label>
</div>
        
))}

    And then for the onSubmit function:

    <form className="w-full taskForm" onSubmit={(e) => {
    e.preventDefault()
    const selectedTasks = []
    const checkedBoxes = document.querySelectorAll('input[name=task]:checked');
    checkedBoxes.forEach((box) => {
        selectedTasks.push(alltasks.find((task)=> task.task === box.value))
    })
    console.log(selectedTasks)
    stateChanger(false)
}}>

    And now you have a new array selectedTasks containing the objects of the tasks chosen through the checkboxes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search