A guide on extracting information from arrays using JavaScript

Can you show me how to retrieve the name, age, and salary from the products array? Also, could you please explain what is wrong with the code?

var products = [
{name: 'John', age: 30, salary: 400},
{name: 'Jane', age: 31, salary: 500},
{name: 'Jim', age: 32, salary: 600},
];

var btn = document.getElementById("myBtn");
btn.addEventListener("click", funct);


function funct(){
  for( var i = 0; i < products.length; i++ ){
    document.write( " this " + products[i] );
  }
  return;
}
console.log(funct());
<button id="myBtn">Start</button>

Answer №1

To access the property name of an object in JavaScript, you should reference it as products[i].name instead of trying to access the entire object:

var products = [
{name: 'John', age: 30, salary: 400},
{name: 'Jane', age: 31, salary: 500},
{name: 'Bob', age: 32, salary: 600},
];

var btn = document.getElementById("myBtn");
btn.addEventListener("click", handleButtonClick);


function handleButtonClick(){
  for( var i = 0; i < products.length; i++ ){
    console.log( "name: " + products[i].name );
    console.log( "age: " + products[i].age );
    console.log( "salary: " + products[i].salary );
  }

}
<button type="button" id="myBtn">Start</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I slow down the response time in Express Node?

I have set up a route that triggers an asynchronous function when the URL is accessed. This function will eventually return a value, which I want to use as the response for the get request. However, I am facing an issue with delaying the response until the ...

How to import a template from a different webpage in AngularJS

I have a situation where I need to include a template from one HTML page into another because they are both lengthy and it's not practical to keep them on the same page. Therefore, I have decided to separate them for better organization. Here is an ov ...

Problems during the installation of Webpack

Encountering Error Setting up Webpack and Babel with NPM npm ERR! Unexpected end of JSON input while parsing near '...pdragon":"^0.7.0","to' npm ERR! A complete log of this run can be found in: npm ERR! A complete log of this run can be found ...

Angular 2 is not recognizing the element 'router-outlet'

I am currently utilizing universal-cli... This is how my app.node.module.ts appears: /** * This file and `main.browser.ts` are quite similar, for now! * By separating these, you can create logic, imports, etc that are "Platform" specific. * If you wis ...

JavaScript Filter Function: filtering based on multiple conditions (either one can evaluate to true)

I seem to be missing something very simple here. I am working with an array of objects that contains various information. Depending on user interaction, I want to filter out certain objects; let arr = [ {'num': 1, 'name': 'joe&a ...

A guide on incorporating dynamic information into JSON files with PHP

I am currently working on developing a checkbox tree where I require dynamic values for checkboxes. Below is my code snippet. Initially, I have static data in JSON format and now I need to retrieve dynamic data from a MySQL database. Despite trying vario ...

Issue with extraneous event being activated upon bootstrap collapse button usage

I have implemented a functionality using Bootstrap 5.2 where I have two buttons that can hide content by utilizing the Bootstrap collapse plugin. <div class="col-12 col-sm-auto"> <span class="pe-2"> ...

Disable the mousedown event in JavaScript/jQuery

During a drag and drop operation, I have set certain limits on the screen. When the draggable object passes these limits, I want it to return to its original position. The issue I am facing is that if the onmousedown event is active, the object does not r ...

Issue: jQuery Datatable not functioning properly while attempting to populate the table through JavaScript.Explanation: The

I'm currently working on populating a table using JavaScript. However, I've encountered an issue where the table is being populated but it shows "No data available in table". Furthermore, when I try to interact with the data, it disappears. This ...

Ways to create a clickable anchor tag without using any text

I am currently designing my own website and incorporating links to various social media platforms using icons. However, I am facing an issue where the links are not clickable. For a detailed look at my problem, you can refer to this JSFiddle: http://jsfid ...

Issue with CSS styles not linking correctly to ejs templates

I'm having trouble linking my CSS stylesheet in my project. I have the CSS file stored in a public folder with a css subfolder within it. Despite trying various methods, I can't seem to get the stylesheet to connect properly. Below is a snippet f ...

What is the function of the OmitThisParameter in TypeScript when referencing ES5 definitions?

I came across this specific type in the ES5 definitions for TypeScript and was intrigued by its purpose as the description provided seemed quite vague. /** * Removes the 'this' parameter from a function type. */ type OmitThisParameter<T> ...

PHP: How can I find the final even number in an array efficiently?

In this scenario, I am dealing with an array containing a combination of odd and even integers in PHP. My objective is to extract the last even number from the array. ...

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

Attempting to display a singular form

Currently, I am working on a MERN app and encountering a small issue... I am developing an application where users can create rooms and within those rooms, they can plan their daily activities. It's similar to a TODO app but more intricate. I wanted ...

Display error messages in Vue.js

Within this component, I have a method that updates an employee. My goal is to display the error message in the view immediately after the "errorMessage" variable is assigned/changed within the "error" callback of the ajax call. var EmployeeEdit = Vue ...

Updating the filter predicate of the MatTableDataSource should allow for refreshing the table content without needing to modify the filter

Currently, I am working on dynamically altering the filterPredicate within MatTableDataSource to enhance basic filtering functionalities. I want to include a fixed condition for text filtering (based on user input in a search field) for two string columns ...

What is causing my vue.js table to not display properly?

Struggling to render a table using vue.js? You're not alone. Many developers face challenges when trying to use v-for to iterate through data and display it in a table format. It can be frustrating when everything seems fine in the console, but the ta ...

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

Tips for organizing JSON object data and displaying it appropriately on an HTML page

This code utilizes ajax: $("form").on("submit", function () { var data = { "action": "test" }; data = $(this).serialize() + "&" + $.param(data); $.ajax({ type: "POST", dataType: "json", url: "ajax2.php" ...