Modify array elements in JavaScript without the need to refresh the webpage

Question

Modify array elements in JavaScript without the need to refresh the webpage

Upon loading the page, I am presented with a literal array as shown below:

<script type="text/javascript">
var members = [
    {
       name:"Alan Lim",
       id:"54700f06-a199-102c-8976-b1732b7ffc74",
       positions:[
          {
             id:"4cdeb2a2-8897-102d-80ee-95364de284f0"
          }
       ]
    },
    {
       name:"Ben Sinclair",
       id:"ed34b5a4-9b2f-102c-8475-9e610b13400a",
       conflict:"true",
       positions:[
          {
             id:"f00c2128-8895-102d-80ee-95364de284f0"
          },
          {
             id:"f00c68ea-8895-102d-80ee-95364de284f0"
          },
          {
             id:"4cde6824-8897-102d-80ee-95364de284f0"
          },
          {
             id:"4cde9ea2-8897-102d-80ee-95364de284f0"
          }
       ],
       locations:[
          {
             id:"88fb5f94-aaa6-102c-a4fa-1f05bca0eec6"
          },
          {
             id:"930555b0-a251-102c-a245-1559817ce81a"
          }
       ]
    },
    {
       name:"Debbie Wright",
       id:"fa49307a-9cfb-102d-bd08-842c500d506d"
    }
]
</script>

Is there a method to modify this array without triggering a page reload? For instance, I wish to add conflict:"true" to Alan Lim...

For example:

Replace this:

    {
       name:"Alan Lim",
       id:"54700f06-a199-102c-8976-b1732b7ffc74",
       positions:[
          {
             id:"4cdeb2a2-8897-102d-80ee-95364de284f0"
          }
       ]
    },

With this:

    {
       name:"Alan Lim",
       id:"54700f06-a199-102c-8976-b1732b7ffc74",
       conflict:"true",
       positions:[
          {
             id:"4cdeb2a2-8897-102d-80ee-95364de284f0"
          }
       ]
    },

I hope that clarifies the situation :) This adjustment is necessary because additional JavaScript code relies on extracting data from this array. Any modifications made by the other JavaScript need to be accurately reflected in this array...

javascript arrays

Answer 1

Answer №1

To search for a specific member (most likely by name based on the query) and update their details, you can use a loop like this:

for(var j=0; j<members.length; j++){
  if(members[j].name === "Alan Lim"){
    members[j].status = "active";
  }
}

You can test it out here, or opt for a more general approach through this method:

function updateProperty(personName, property, value){
  for(var j=0; j<members.length; j++){
    if(members[j].name === personName){
      members[j][property] = value;
    }
  }
}

Answer 2

To search for a specific member (most likely by name based on the query) and update their details, you can use a loop like this:

for(var j=0; j<members.length; j++){
  if(members[j].name === "Alan Lim"){
    members[j].status = "active";
  }
}

You can test it out here, or opt for a more general approach through this method:

function updateProperty(personName, property, value){
  for(var j=0; j<members.length; j++){
    if(members[j].name === personName){
      members[j][property] = value;
    }
  }
}

Answer 3

Answer №2

Given that your array is organized numerically, could you simply use the following line of code:

members[0]['conflict'] = "true";

Answer 4

Given that your array is organized numerically, could you simply use the following line of code:

members[0]['conflict'] = "true";

Modify array elements in JavaScript without the need to refresh the webpage

Answer №1

Answer №2

Similar questions

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

What is the best way to retrieve data based on a condition using JavaScript within a React application?

Tips for implementing custom string ordering with Sequelize

Exploring the Elements of Arrays in C#

Ways to rearrange div elements using JavaScript

Efficient Loading and Smooth Scrolling with Angular2 (version 7)

JavaScript: Working with Nested Callbacks and Retrieving MySQL Data

When performing a Numpy dot product, you may encounter an `IndexError` indicating that only integers, slices,

Testing Components in Vue: A Guide to Mocking Vue Components

Trouble persisting in loading PopperJS and Bootstrap through RequireJS, despite following the suggested PopperJS version

Tips for modifying the status of a single component within a v-for loop without impacting other components

Data has been successfully acquired through the query, however, it cannot be accessed via the GraphQL API

AngularJS factory architecture for multiple functions

Utilize HighCharts to seamlessly implement multiple series with the help of AJAX requests

Tips on creating a stationary sidebar that ends at the container's edge

What is causing my reusable component to malfunction when used in conjunction with the "setInterval" function?

numerous ajax requests and array variables

Encountering issues with React context API where the state is being set to undefined

What is the process of invoking a function from a different component in Vue 3?

Eliminate any repetitive items from the array while simultaneously boosting their quantity