build a key-value pair collection in Angular 2

Question

build a key-value pair collection in Angular 2

Struggling to figure out how to create an associative array in Angular2?

I've attempted the following:

  onSubmit(){

let inputfield:any[]  = [];

for(var i=0; i<this.inspectionform.value["inputfileds"].length; i++){

 if(this.inspectionform.value["inputfileds"][i]["input"] != ""){
    //need help here
    inputfield.push( i : this.inspectionform.value["inputfileds"][i]["input"]) //syntax error returned
  }

}

} What I actually want is to add a key and value pair to the array

Something like

1:sdbhd //add this to the array

In my attempts within the for loop, I've tried:

//inside the for loop

     let arrayval = [];
    arrayval.push(this.inspectionform.value["inputfileds"][i]["input"])
    arrayval.push(i)

    inputfield.push(arrayval);

This results in a new object of this type being created each time:

0:njnf
1:1(value of i)

arrays angular typescript

Answer 1

Answer №1

If you're deciding between using a Map or a plain object, I recommend opting for a plain object;

Example

const myobject = {}
myobject.foo = 1
myobject.foo === myobject['foo'] // true
myobject['bar'] = 1337;
myobject.bar === 1337 // true
myobject.foo-bar = 1 // ERROR: cannot have dashes
myobject['foo-bar'] = 1 // Works

In ES6 and newer browsers, you can easily retrieve all keys by using Object.keys(myobject). For older environments, looping over keys using for ... in is necessary and can be seen in this polyfill: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Another consideration to keep in mind is ensuring that each item in the property chain is defined. For instance, if you have

var foobar = {
  foo: { bar: 1 }
}

you can successfully call foobar.foo.bar.toString() to get "1", but attempting foobar.foo.bang.toString() will result in an error since bang is not defined on the foo object.

To handle this, add a guard check like

foobar.foo.bang && foobar.foo.bang.toString()

, which only executes the toString method if bang exists.

An easier approach is utilizing lodash, providing functions like _.get and _.set that manage guards and create missing properties for you.

Answer 2

If you're deciding between using a Map or a plain object, I recommend opting for a plain object;

Example

const myobject = {}
myobject.foo = 1
myobject.foo === myobject['foo'] // true
myobject['bar'] = 1337;
myobject.bar === 1337 // true
myobject.foo-bar = 1 // ERROR: cannot have dashes
myobject['foo-bar'] = 1 // Works

In ES6 and newer browsers, you can easily retrieve all keys by using Object.keys(myobject). For older environments, looping over keys using for ... in is necessary and can be seen in this polyfill: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Another consideration to keep in mind is ensuring that each item in the property chain is defined. For instance, if you have

var foobar = {
  foo: { bar: 1 }
}

you can successfully call foobar.foo.bar.toString() to get "1", but attempting foobar.foo.bang.toString() will result in an error since bang is not defined on the foo object.

To handle this, add a guard check like

foobar.foo.bang && foobar.foo.bang.toString()

, which only executes the toString method if bang exists.

An easier approach is utilizing lodash, providing functions like _.get and _.set that manage guards and create missing properties for you.

Answer 3

Answer №2

When working with Javascript, it's important to note that there is no associated array feature. Instead, you can simply use {} or utilize the new Map API.

let exampleMap = new Map();

exampleMap.set('key1', 'value 1');

exampleMap.set('key2', 5);

console.log(exampleMap.get('key1'));

To dive deeper into this topic, check out: Map in Javascript

Answer 4

When working with Javascript, it's important to note that there is no associated array feature. Instead, you can simply use {} or utilize the new Map API.

let exampleMap = new Map();

exampleMap.set('key1', 'value 1');

exampleMap.set('key2', 5);

console.log(exampleMap.get('key1'));

To dive deeper into this topic, check out: Map in Javascript

build a key-value pair collection in Angular 2

Answer №1

Answer №2

Similar questions

Embedding an image by inserting the URL

Tips for determining if an HTMLElement has already been created

Adding an anchor tag to an ngx-datatable-column can be done by utilizing the properties

Optimizing Angular6 Pipe Filter Performance for Large Arrays

What is the most reliable method for converting a 32-bit unsigned integer to a big endian byte array?

Tips for transferring TimeZone Name from Angular to .NET API

I have been encountering an error consistently whenever I attempt to access the _id parameter in my angular front-end

Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

How to access an array mapped to a specific key within an object in JavaScript

The challenge of deallocating a dynamic array of C++ class pointers

Extract pieces from a union type that includes a discriminator which is itself a union

Steps for converting TypeScript code to JavaScript using jQuery, without the need for extra libraries or frameworks like NPM

How can I display the value of a radio button that has been chosen?

ReactJS Typescript Material UI Modular Dialog Component

React Material UI - All radio buttons within a list can be individually selected

"Unindexing data in Angular: A step-by-step guide

What is the best way to incorporate a 'category filter' in Angular2?

When a URL is triggered via a browser notification in Angular 2, the target component ceases to function properly

Caught off guard by this promise: TypeError - Attempting to access a property that does not exist in my Ionic 2 application