Instructions on how to insert information into an array by clicking a button

Question

Instructions on how to insert information into an array by clicking a button

As a newbie JavaScript programmer, I am struggling to figure out how to make my code work as a function. I want to update the ajax_data array every time I click the add row button.

Fresh JS coder looking for some guidance.

var ajax_data = [{
  Type: "Analog Input 0",
  Tag: "AI0",
  Description: "Description"
}, ]
var new_row = {
  Type: "Analog Input 2",
  Tag: "AI2",
  Description: "Description"
}

$("Add_row").click(function(ajax_data, new_row) {
  ajax_data.push(new_row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="Add_row" name="button">Add row</button>

javascript arrays

Answer 1

Answer №1

When working inside the $("#Add_row").click function, it is important to note that the argument names are ajax_data and new_row. However, if you have variables defined with the same name outside of the function, JavaScript will prioritize the arguments within the function. This may result in undefined values if nothing was passed when the function was called. To resolve this issue, simply remove them from the function.

In addition, I suggest considering retiring the use of var in Javascript and opting for let or const instead.

let ajax_data = [{
  Type: "Analog Input 0",
  Tag: "AI0",
  Description: "Description"
}, ]
let new_row = {
  Type: "Analog Input 2",
  Tag: "AI2",
  Description: "Description"
}

$("#Add_row").click(() => {
  ajax_data.push(new_row);
  console.log(ajax_data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="Add_row" name="button">Add row</button>

Answer 2

When working inside the $("#Add_row").click function, it is important to note that the argument names are ajax_data and new_row. However, if you have variables defined with the same name outside of the function, JavaScript will prioritize the arguments within the function. This may result in undefined values if nothing was passed when the function was called. To resolve this issue, simply remove them from the function.

In addition, I suggest considering retiring the use of var in Javascript and opting for let or const instead.

let ajax_data = [{
  Type: "Analog Input 0",
  Tag: "AI0",
  Description: "Description"
}, ]
let new_row = {
  Type: "Analog Input 2",
  Tag: "AI2",
  Description: "Description"
}

$("#Add_row").click(() => {
  ajax_data.push(new_row);
  console.log(ajax_data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="Add_row" name="button">Add row</button>

Instructions on how to insert information into an array by clicking a button

Answer №1

Similar questions

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

Unable to assign focus to textbox

Utilizing jQuery to Maintain State Across Page Refreshes with Cookies

Unlock the potential of JavaScript by accessing the local variable values in different functions

What is the best way to keep track of the most recent 100 items?

Error: Express is undefined and does not have a property called 'use'

Unexpected Issue with JavaScript Ajax (Using jQuery.post): The Promise State Turns to "Rejected"

Refreshing a PNG file without the need to refresh the entire page

What is the best way to organize a massive file over 10Gb filled with words?

If the condition is met with the presence of X in the string, execute one action; otherwise, proceed with

What is the best way to choose the current Div's ID, as well as its Width and Height properties?

Display a list of items using ReactJS by mapping through an array of objects and rendering based on

Expanding and collapsing multiple tables in Material-UI

Issue with mediaelement in Angular 8: video playback does not display after 2 seconds

ERROR: Unexpected issue occurred with v8::Object::SetInternalField() resulting in an internal field going out of bounds while utilizing node-cache in Node.js

What is the reason for the jQuery plugin not being applied after replacing the page content with an Ajax response?

Tips for maintaining the full width/height ratio of a child image when covering a fixed size container

Efficiently uploading multiple files using AJAX in conjunction with Codeigniter

Filtering array objects based on elements in another array

Utilize the power of jQuery for form validation by combining the errorPlacement and showErrors functions