Modifying an element within a nested array

Question

Modifying an element within a nested array

I am struggling to create a JavaScript function that can update the "checked" value within an object in an array structured as follows:

array:[
  { id:1,
    name:"foo",
    options: [
      {id:"one", checked: false},
      {id:"two", checked: true}
    ]
  },
  { id:2,
    name:"faa",
    options: [
      {id:"one", checked: false},
      {id:"two", checked: true}
    ]
  }
 ]

I have experience with updating the values in an array of objects, but I'm unsure how to approach this specific structure. Any advice or suggestions would be greatly appreciated.

Please note the typo correction in the array format.

javascript arrays vue.js

Answer 1

Answer №1

It seems like you are looking to make updates to the checked property using checkboxes in an HTML template.

Check out this demo :

new Vue({
  el: '#app',
  data: {
    array: [{
        id:1,
        name:"foo",
        options: [
        {id:"one", checked: false},
        {id:"two", checked: true}]
    }, {
        id:2,
        name:"faa",
        options: [
        {id:"one", checked: false},
        {id:"two", checked: true}]
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="data in array" :key="data.id">
    <b>{{ data.name }}</b>
    <div v-for="(checkboxData, index) in data.options" :key="index">
      {{ checkboxData.id }} : <input type="checkbox" v-model="checkboxData.checked"/>
    </div>
  </div><br>
  <b>Updated Value : </b>
  <p>{{ array }}</p>
</div>

Answer 2

It seems like you are looking to make updates to the checked property using checkboxes in an HTML template.

Check out this demo :

new Vue({
  el: '#app',
  data: {
    array: [{
        id:1,
        name:"foo",
        options: [
        {id:"one", checked: false},
        {id:"two", checked: true}]
    }, {
        id:2,
        name:"faa",
        options: [
        {id:"one", checked: false},
        {id:"two", checked: true}]
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="data in array" :key="data.id">
    <b>{{ data.name }}</b>
    <div v-for="(checkboxData, index) in data.options" :key="index">
      {{ checkboxData.id }} : <input type="checkbox" v-model="checkboxData.checked"/>
    </div>
  </div><br>
  <b>Updated Value : </b>
  <p>{{ array }}</p>
</div>

Answer 3

Answer №2

To generate a new array of objects with the updated values, you can utilize the map() method.

const info = [{
    id: 1,
    name: "foo",
    options: [
      { id: "one", checked: false },
      { id: "two", checked: true }
    ]
  },
  {
    id: 2,
    name: "faa",
    options: [
      { id: "one", checked: false },
      { id: "two", checked: true }
    ]
  }
];

const modifiedResult = info.map((i) => {
  return {
    ...i,
    options: i.options.map((x) => {
      return {
        ...x,
        checked: !x.checked // invert the checked value as an example
      }
    })
  }
});

console.log(modifiedResult);

Answer 4

To generate a new array of objects with the updated values, you can utilize the map() method.

const info = [{
    id: 1,
    name: "foo",
    options: [
      { id: "one", checked: false },
      { id: "two", checked: true }
    ]
  },
  {
    id: 2,
    name: "faa",
    options: [
      { id: "one", checked: false },
      { id: "two", checked: true }
    ]
  }
];

const modifiedResult = info.map((i) => {
  return {
    ...i,
    options: i.options.map((x) => {
      return {
        ...x,
        checked: !x.checked // invert the checked value as an example
      }
    })
  }
});

console.log(modifiedResult);

Modifying an element within a nested array

Answer №1

Answer №2

Similar questions

How can JavaScript be used to prevent pinch and zoom functionality on Google Maps?

Comparing DOM Manipulation and Templating

Issue with utilizing Vuejs variable in Google Maps Matrix API function

What measures can I take to restrict users from adding names that are already in the system?

What is the reason behind the increasing popularity of single quotes in JavaScript files in recent times?

Tips for implementing orderBy and filter in ng-repeat when working with an object instead of an array

Submitting JSON data using Alamofire in Swift

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

What is the best way to display individual array items in Python without including square brackets around them?

Experience the convenience of running Javascript code directly within the editor of Intellij IDEA

Limitations exist when trying to open multiple tabs using the same link in Express puppeteer

What is the best way to substitute multiple characters at a specific position in JavaScript?

Combining Python Arrays with JavaScript Indexing in Django's Template Language

Instead of just displaying a count after updating in the database, the updated object will be

Tips for testing nested HTTP calls in unit tests

the dropdown menu toggle is not working as expected

JasmineJS: manipulating the DOM to achieve the desired outcome

Constructing the necessary gulp configuration file

Why doesn't the Iframe onLoad event trigger when uploading a file?

Execute protractor to open chrome in incognito mode and disable web security for cross-origin resource sharing