What is the best way to establish a new JavaScript data type that can be accessed using both key and index?

Question

What is the best way to establish a new JavaScript data type that can be accessed using both key and index?

Looking to create a unique datatype or object in JavaScript that allows access by both index and key, as well as having a length property to display the number of items in the datatype. Something along the lines of:


MyDataType[0].name="John"
MyDataType[0].salary="over 1k"

If I were to write:

MyDataType['John'].salary //I should get "over 1k"

And also if I were to write:

MyDataType[0].salary //I should also get "over 1k"

I would like it to include:

MyDataType.length //should return 1

Is this achievable?

I experimented with Proxy and it worked smoothly for the index/key aspect but lacked a length property. When using an array, I had access to index and length properties but couldn't use keys.

Appreciate any guidance you can provide. Thank you!

javascript

Answer 1

Answer №1

If you are facing challenges similar to what I experienced, I have finally discovered a solution thanks to @Quickredfox at this link:

Here is the code snippet that helped me:

"use strict";
 var MyCollection = new Proxy(
[{
name: 'monkey',
 score: 50
}, {
    name: 'giraffe',
 score: 100
}, {
name: 'pelican',
score: 150
}, {
    name: 'ZZoo',
  score: 69
}], {
 get: function(obj, prop) {
  if (prop in obj) {
    // default behavior
    return obj[prop];
  }
  if (typeof prop == 'string') {

      if (prop == 'length') {
      return obj.sort(function(a, b) {
        return obj.length;
      });
    }    

   for (var i = 0; i < obj.length; i++) {
      var player = obj[i];
      if (player.name == prop) {
        return player;
      }
    }

    return;
  }

}
});

document.write(MyCollection.length);

Answer 2

If you are facing challenges similar to what I experienced, I have finally discovered a solution thanks to @Quickredfox at this link:

Here is the code snippet that helped me:

"use strict";
 var MyCollection = new Proxy(
[{
name: 'monkey',
 score: 50
}, {
    name: 'giraffe',
 score: 100
}, {
name: 'pelican',
score: 150
}, {
    name: 'ZZoo',
  score: 69
}], {
 get: function(obj, prop) {
  if (prop in obj) {
    // default behavior
    return obj[prop];
  }
  if (typeof prop == 'string') {

      if (prop == 'length') {
      return obj.sort(function(a, b) {
        return obj.length;
      });
    }    

   for (var i = 0; i < obj.length; i++) {
      var player = obj[i];
      if (player.name == prop) {
        return player;
      }
    }

    return;
  }

}
});

document.write(MyCollection.length);

What is the best way to establish a new JavaScript data type that can be accessed using both key and index?

Answer №1

Similar questions

Passing events value in Fullcalendar Plugin by utilizing a javascript function to format events in the Fullcalendar event format

Show dynamic outcomes on the site

Using JavaScript's FOR loop in combination with AJAX

Exploring Nodejs and delving into fundamental queries

When implementing AngularJS in a situation where the page layout is created by the user, what is the best

Angular $resource failing to transfer parameter to Express endpoint

Guide on removing the parent JSON array while retaining the child JSON array

Enhancing jqgrid by incorporating cellattr to JSON colmodel

Error message: The recursive function is unable to return a value when operating

The 'props.p' navigation in react-native is undefined

Unable to trigger onClick event

Converting Typescript objects containing arrays into a single array

Cypress and VueJS: How to target elements that are dynamically generated following a specific user interaction

Move the DIV element to a static section within the DOM

Ways to implement a custom scrollbar across an entire webpage:

Encountering an issue while trying to import the D3.js library into my React.js application

Incorporating Numerous Location Pointers in Angular-google-maps

Can other JavaScript event listeners be synchronized with an asynchronous event?

Tips for populating individual arrays in AngularJS with data from a JSON:- Iterate through the JSON

Is it possible for me to hand over control to a child process and retrieve the result in Node.js?