I am working on implementing a map method in JavaScript and Vue to generate a new array of objects while only including specific items in each object. I have designed a user interface with 2 checkboxes corresponding to 2 distinct objects:
<div v-for="object in objects" :key="object.id" class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{ object.name }}</div>
</div>
<span class="flex-1 flex mt-8 m-2">
<span class="flex flex-col">
<input v-model="checkBoxArray" :value="object.id" @click="selectObject(object.id)" type="checkbox" class="h-5 w-5" />
</span>
</span>
</div>
const objects = [
{
id: 1,
name: 'bucky barnes',
title: 'winter soldier',
cellnum: '123-456-7890',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d4e5d414a5c6f47564b5d4e014c4042">[email protected]</a>',
description: 'Description 1'
},
{
id: 2,
name: 'sam wilson',
title: 'falcon',
cellnum: '098-765-4321',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f7f0fdf2feffd1f0e7f4fff6f4e3e2bff2fefc">[email protected]</a>',
description: 'Description 2'
},
]
The selectObject function triggered by the checkbox input adds the id of a selected object to checkBoxArray:
const checkBoxArray = ref([])
const selectObject = (id) => {
checkBoxArray.value.push(id)
}
A watch property monitors changes to checkBoxArray.value, then invokes a function that uses map to create a new array targeting the id of the selected object:
watch(checkBoxArray.value, () => {
const storedObjects = objects.map(val => checkBoxArray.value.find(obj => obj === val.id), ['id', 'name', 'title'])
console.log(storedObjects)
})
My goal is to produce a new array containing an object with ONLY the id, name, and title from the original object. For example:
{id: 1, name: 'bucky barnes', title: 'winter soldier'}
Currently, I am only getting a new array with the id of the selected object. How can I adjust the map and find methods within the watch property to generate a new array with an object containing ONLY id, name, and title?
Here is the complete code snippet:
<template>
<div>
<div v-for="object in objects" :key="object.id" class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{ object.name }}</div>
</div>
<span class="flex-1 flex mt-8 m-2">
<span class="flex flex-col">
<input v-model="checkBoxArray" :value="object.id" @click="selectObject(object.id)" type="checkbox" class="h-5 w-5" />
</span>
</span>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
const objects = [
{
id: 1,
name: 'bucky barnes',
title: 'winter soldier',
cellnum: '123-456-7890',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b382b373c2a1931203d2b38773a3634">[email protected]</a>',
description: 'Description 1'
},
{
id: 2,
name: 'sam wilson',
title: 'falcon',
cellnum: '098-765-4321',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdaddd0dfd3d2fcddcad9d2dbd9cecf92dfd3d1">[email protected]</a>',
description: 'Description 2'
},
]
const checkBoxArray = ref([])
const selectObject = (id) => {
checkBoxArray.value.push(id)
}
watch(checkBoxArray.value, () => {
const storedObjects = objects.map(val => checkBoxArray.value.find(obj => obj === val.id), ['id', 'name', 'title'])
console.log(storedObjects)
})
onMounted(() => {
console.log(objects)
})
</script>