How to Locate Values of JSON Array Objects by their Key Names

Question

How to Locate Values of JSON Array Objects by their Key Names

Is there a JavaScript implementation similar to HashMap for sorting JSON data in the following scenario?

Here is an example of the JSON structure:

{
"level1": {
    "level2": [{
        "product1": [
            "item1",
            "item2"
        ]
    }, {
        "product2": [
            "item1",
            "item2"
        ]
    }, {
        "product3": [
            "item5",
            "item6"
        ]
    }]
}
}

In my use case, when I have a key like 'product3', I need to retrieve its corresponding values such as "item5" and "item6". Although looping through the entire level2 object works, I am wondering if there is a more efficient way to directly find values using the key.

javascript json

Answer 1

Answer №1

You have the option to construct either an object or a Map in ES2015:

Below is an ES5 example demonstrating the use of an object:

var map = Object.create(null);
data.level1.level2.forEach(function(entry) {
    Object.keys(entry).forEach(function(key) {
        map[key] = entry;
    });
});

Live demonstration:

var data = {
  "level1": {
    "level2": [{
      "product1": [
        "item1",
        "item2"
      ]
    }, {
      "product2": [
        "item1",
        "item2"
      ]
    }, {
      "product3": [
        "item5",
        "item6"
      ]
    }]
  }
};
var map = Object.create(null);
data.level1.level2.forEach(function(entry) {
  Object.keys(entry).forEach(function(key) {
    map[key] = entry;
  });
});
var name = "product2";
console.log(map[name]);

We initiate the object (map) using Object.create(null) to avoid inheriting properties like toString and valueOf.

The inner loop, following Object.keys, is required due to each object in the level2 array having a distinct property name. This structure may be unusual and somewhat cumbersome.

In ES2015 (also known as "ES6") with Map, the process is quite similar - simply utilize new Map and set:

var map = new Map();
data.level1.level2.forEach(function(entry) {
    Object.keys(entry).forEach(function(key) {
        map.set(key, entry);
    });
});

Live demonstration:

var data = {
  "level1": {
    "level2": [{
      "product1": [
        "item1",
        "item2"
      ]
    }, {
      "product2": [
        "item1",
        "item2"
      ]
    }, {
      "product3": [
        "item5",
        "item6"
      ]
    }]
  }
};
var map = new Map();
data.level1.level2.forEach(function(entry) {
    Object.keys(entry).forEach(function(key) {
        map.set(key, entry);
    });
});
var name = "product2";
console.log(map.get(name));

Answer 2

You have the option to construct either an object or a Map in ES2015:

Below is an ES5 example demonstrating the use of an object:

var map = Object.create(null);
data.level1.level2.forEach(function(entry) {
    Object.keys(entry).forEach(function(key) {
        map[key] = entry;
    });
});

Live demonstration:

var data = {
  "level1": {
    "level2": [{
      "product1": [
        "item1",
        "item2"
      ]
    }, {
      "product2": [
        "item1",
        "item2"
      ]
    }, {
      "product3": [
        "item5",
        "item6"
      ]
    }]
  }
};
var map = Object.create(null);
data.level1.level2.forEach(function(entry) {
  Object.keys(entry).forEach(function(key) {
    map[key] = entry;
  });
});
var name = "product2";
console.log(map[name]);

We initiate the object (map) using Object.create(null) to avoid inheriting properties like toString and valueOf.

The inner loop, following Object.keys, is required due to each object in the level2 array having a distinct property name. This structure may be unusual and somewhat cumbersome.

In ES2015 (also known as "ES6") with Map, the process is quite similar - simply utilize new Map and set:

var map = new Map();
data.level1.level2.forEach(function(entry) {
    Object.keys(entry).forEach(function(key) {
        map.set(key, entry);
    });
});

Live demonstration:

var data = {
  "level1": {
    "level2": [{
      "product1": [
        "item1",
        "item2"
      ]
    }, {
      "product2": [
        "item1",
        "item2"
      ]
    }, {
      "product3": [
        "item5",
        "item6"
      ]
    }]
  }
};
var map = new Map();
data.level1.level2.forEach(function(entry) {
    Object.keys(entry).forEach(function(key) {
        map.set(key, entry);
    });
});
var name = "product2";
console.log(map.get(name));

Answer 3

Answer №2

A concise solution using Array.some, Array.indexOf, and Object.keys functions to find a specific key within nested objects:

// Assuming 'json' is the initial object
var key = 'product3', values;
json['level1']['level2'].some((v) => Object.keys(v).indexOf(key) !== -1 && (values = v[key]), values);

console.log(values);  // Returns ["item5", "item6"]

Explanation:
arr.some(callback[, thisArg]) - This method checks if any element in an array satisfies a certain condition, here used to find the desired key value pair.
It iterates through the objects until it finds the specified key using

Object.keys(v).indexOf(key) !== -1

.
Once the key is found, its corresponding value is stored in the 'values' variable with && (values = v[key]).
This allows for efficient search without iterating through all objects unnecessarily.

Answer 4

A concise solution using Array.some, Array.indexOf, and Object.keys functions to find a specific key within nested objects:

// Assuming 'json' is the initial object
var key = 'product3', values;
json['level1']['level2'].some((v) => Object.keys(v).indexOf(key) !== -1 && (values = v[key]), values);

console.log(values);  // Returns ["item5", "item6"]

Explanation:
arr.some(callback[, thisArg]) - This method checks if any element in an array satisfies a certain condition, here used to find the desired key value pair.
It iterates through the objects until it finds the specified key using

Object.keys(v).indexOf(key) !== -1

.
Once the key is found, its corresponding value is stored in the 'values' variable with && (values = v[key]).
This allows for efficient search without iterating through all objects unnecessarily.

Answer 5

Answer №3

If you want to restructure the data, one option is to transform it into a different format.

const data = {
"category1": {
    "subcategory1": [{
        "item1": [
            "detail1",
            "detail2"
        ]
    }, {
        "item2": [
            "detail3",
            "detail4"
        ]
    }]
}, 
  "category2": {
    "subcategory1": [{
        "item1": [
            "detail1b",
            "detail2"
        ]
    }, {
        "item2": [
            "detail3",
            "detail4"
        ]
    }]
  }
};

const transformedData = Object
  .keys(data)
  .reduce((obj, key) => {
    const value = data[key];
    
    return Object.assign(obj, {[key]:  transformSubcategory(value)});
  }, {});

console.log(transformedData.category1.subcategory1.item2);
console.log(transformedData.category1.subcategory1.item1);
console.log(transformedData.category2.subcategory1.item1);

function transformSubcategory(subcategory) {
  return Object
    .keys(subcategory)
    .reduce((obj, key) => {
      const value = subcategory[key];
    
      return Object.assign(obj, {[key]:  transformItem(value)});
    }, {});
}

function transformItem(item) {
  return item
    .reduce((obj, details) => {
      return Object.assign(obj, details);
    }, {});
}

Answer 6

If you want to restructure the data, one option is to transform it into a different format.

const data = {
"category1": {
    "subcategory1": [{
        "item1": [
            "detail1",
            "detail2"
        ]
    }, {
        "item2": [
            "detail3",
            "detail4"
        ]
    }]
}, 
  "category2": {
    "subcategory1": [{
        "item1": [
            "detail1b",
            "detail2"
        ]
    }, {
        "item2": [
            "detail3",
            "detail4"
        ]
    }]
  }
};

const transformedData = Object
  .keys(data)
  .reduce((obj, key) => {
    const value = data[key];
    
    return Object.assign(obj, {[key]:  transformSubcategory(value)});
  }, {});

console.log(transformedData.category1.subcategory1.item2);
console.log(transformedData.category1.subcategory1.item1);
console.log(transformedData.category2.subcategory1.item1);

function transformSubcategory(subcategory) {
  return Object
    .keys(subcategory)
    .reduce((obj, key) => {
      const value = subcategory[key];
    
      return Object.assign(obj, {[key]:  transformItem(value)});
    }, {});
}

function transformItem(item) {
  return item
    .reduce((obj, details) => {
      return Object.assign(obj, details);
    }, {});
}

Answer 7

Answer №4

For this demonstration (given that level1 and level2 are considered to be placeholders)

var obj = {
  "level1": {
    "level2": [{
      "product1": [
        "item1",
        "item2"
      ]
    }, {
      "product2": [
        "item1",
        "item2"
      ]
    }, {
      "product3": [
        "item5",
        "item6"
      ]
    }]
  }
};
var keyName = "product3";
var items = [];
Object.keys(obj).forEach(function(key) {
  Object.keys( obj[key] ).forEach(function(key1){               
      obj[key][key1].forEach(function(obj1){
         Object.keys(obj1).forEach(function(key2) {
            if (key2 == keyName) {
              items = items.concat(obj1[key2]);
            }
         });
      });
  });
});
console.log(items);

Answer 8

For this demonstration (given that level1 and level2 are considered to be placeholders)

var obj = {
  "level1": {
    "level2": [{
      "product1": [
        "item1",
        "item2"
      ]
    }, {
      "product2": [
        "item1",
        "item2"
      ]
    }, {
      "product3": [
        "item5",
        "item6"
      ]
    }]
  }
};
var keyName = "product3";
var items = [];
Object.keys(obj).forEach(function(key) {
  Object.keys( obj[key] ).forEach(function(key1){               
      obj[key][key1].forEach(function(obj1){
         Object.keys(obj1).forEach(function(key2) {
            if (key2 == keyName) {
              items = items.concat(obj1[key2]);
            }
         });
      });
  });
});
console.log(items);

How to Locate Values of JSON Array Objects by their Key Names

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for choosing at least three files in file upload control

Pages devoid of content: Harnessing the power of Selenium automation with Chrome in

Attempting to retrieve JSON data from an API while currently working from local server

Turn off Satellizer Popup Window Title Bar

Iterate through an array of objects and if a specific property matches a certain condition, extract that particular object - Using

Steps for inserting a title to a marker on the google maps of android through google maps api after the marker has been successfully added

Failed to read the JSON file

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

Direct a flow to an unknown destination

Ensure your JavaScript files are securely wrapped to maintain functionality when they are concatenated

Having trouble generating an image with JavaScript

Utilizing Highcharts with NodeJS

Ensuring DIV Stays Within Window Limits using Javascript

A guide on selecting elements within an ng-repeat loop using Protractor

Here's a method to verify a function prop was invoked using react-testing-library

Pressing the button causes the text to transform temporarily before reverting back to its original state

Unlocking the value of the "input" field within an EventListener function in Angular directly from the DOM

foreverjs neglects to log the child process's console.log output to any log files

Designing an accordion with the main content peeking out slightly before collapsing into place