A guide to locating an object using its key in JavaScript

Question

A guide to locating an object using its key in JavaScript

There are many suggestions out there recommending looping through the object to find what you need, but I'm not convinced that this is the best approach in my situation.

Currently, I have an array with entries linking to another array called people (containing id and name) using person_id, as well as another array called projects (also containing id and name) using project_id.

What I require is the ability to access both the project and person with a specific id within the loop on entries, so I can retrieve their names. Following the suggestions of others would involve looping through both the people and projects arrays for each iteration of entries, which seems inefficient.

Therefore, I came up with the idea of creating what I call a "hashtable" from both the people and projects arrays during initialization. This involves creating new objects called people_hashtable and projects_hashtable, where the key is the id.

For example:

[
  {
    "id": "8",
    "name": "John Doe"
  }
]

would be transformed into:

{
    "8": {
        "name": "John Doe"
    }
}

This way, I can easily access the name without constantly looping through the arrays while still retaining the original order of the array (which is why I am not outputting it directly from the server like this; you can't quite order an object). I also use both people and projects in a selectbox that needs to be ordered by name.

Am I on the right track with this approach? Is there a better way to handle this? Or should I abandon this idea altogether and stick with the search loop suggested in other questions?

I aim to be as efficient as possible on both the server and client sides.

javascript json search loops optimization

Answer 1

Answer №1

You essentially duplicated all the objects in order to bypass using a loop. However, unless there are severe performance issues, I recommend steering clear of that approach. If you absolutely require a form of hashmap, I suggest storing the index of the array instead of replicating the object:

// original array
var arr = [
  {
    "id": "8",
     "name": "John Doe"
  }
];

// lookup table
var lookup = {
  "8": 0
}

However, keep in mind that by doing this, any modifications made to the array will necessitate rebuilding the hashmap.

Creating it is rather straightforward:

var lookup = arr.reduce(function(lookup, item, index) {
  lookup[item.id] = index;
  return lookup;
}, {});

You can also utilize this method to create the object mentioned in your question:

var lookup = arr.reduce(function(lookup, item) {
  lookup[item.id] = {name: item.name};
  return lookup;
}, {});

Nevertheless, my suggestion would be to refrain from implementing this solution if possible.

Answer 2

You essentially duplicated all the objects in order to bypass using a loop. However, unless there are severe performance issues, I recommend steering clear of that approach. If you absolutely require a form of hashmap, I suggest storing the index of the array instead of replicating the object:

// original array
var arr = [
  {
    "id": "8",
     "name": "John Doe"
  }
];

// lookup table
var lookup = {
  "8": 0
}

However, keep in mind that by doing this, any modifications made to the array will necessitate rebuilding the hashmap.

Creating it is rather straightforward:

var lookup = arr.reduce(function(lookup, item, index) {
  lookup[item.id] = index;
  return lookup;
}, {});

You can also utilize this method to create the object mentioned in your question:

var lookup = arr.reduce(function(lookup, item) {
  lookup[item.id] = {name: item.name};
  return lookup;
}, {});

Nevertheless, my suggestion would be to refrain from implementing this solution if possible.

Answer 3

Answer №2

Try using this code snippet for a possible solution. Check it out on JSFIDDLE

var data = [
  {
    "id": "8",
    "name": "John Doe"
  }
];

var object = {};
for(var x=0; x< data.length; x++){
   object[data[x].id] = {name: data[x].name};
}

console.log(object);

Answer 4

Try using this code snippet for a possible solution. Check it out on JSFIDDLE

var data = [
  {
    "id": "8",
    "name": "John Doe"
  }
];

var object = {};
for(var x=0; x< data.length; x++){
   object[data[x].id] = {name: data[x].name};
}

console.log(object);

Answer 5

Answer №3

var itemsList= {
    "article1":{
         "id":"155",
         "name":"First Article",
         "value":-5199.6
    },
    "article2":{
         "id":"255",
         "name":"Second Article",
         "value":-424.91
    }
}

var articleIds = [];
for(var article in itemsList) {
    articleIds.push(itemsList[article]['id']);
}

console.log(articleIds);

Answer 6

var itemsList= {
    "article1":{
         "id":"155",
         "name":"First Article",
         "value":-5199.6
    },
    "article2":{
         "id":"255",
         "name":"Second Article",
         "value":-424.91
    }
}

var articleIds = [];
for(var article in itemsList) {
    articleIds.push(itemsList[article]['id']);
}

console.log(articleIds);

Answer 7

Answer №4

This library https://github.com/paularmstrong/normalizr simplifies the process of data normalization and denormalization.

It can transform the following data structure:

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
}

into this output:

{
  result: "123",
  entities: {
    "articles": { 
      "123": { 
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324" ]
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
  }
}

and vice versa.

Answer 8

This library https://github.com/paularmstrong/normalizr simplifies the process of data normalization and denormalization.

It can transform the following data structure:

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
}

into this output:

{
  result: "123",
  entities: {
    "articles": { 
      "123": { 
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324" ]
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
  }
}

and vice versa.

A guide to locating an object using its key in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Dropping challenging shapes in a block-matching game similar to Tetris

What could be causing the preloader to fail in my React application?

Transforming business entities into JSON format

The search for the view in the directory "/views" was unsuccessful in Express 4.0

Is there a way to switch the video source when a particular h3 tag is clicked?

Attempting to retrieve information from JSON or JSONP through the utilization of the WOT API

"Failure to update the $scope object within an AngularJS service results in no changes being reflected in

Can Firebase data be updated in real-time in a Vue app?

JavaScript conditional calculation mechanism

"Exploring Different Layouts in Mean.js: Whether on the Server Side or leveraging

Steps to trigger a modal form through an ajax call upon clicking a button

prevent unauthorized changes to input using browser developer tools in Angular

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Transfer a parameter from a user input to control pagination in React.js

Combining JSON data in Typescript using the merge method

Transferring an object containing circular references from the server to client-side Javascript without losing its circular structure

I need assistance improving my poor JavaScript patterns and practices. Where should I turn for help?

What is the best way to create a function that requires an argument in TypeScript?

Deciphering WHERE conditions in a Node.js environment

Connecting a pre-existing Angular 2 application to a Node.js server: A step-by-step guide