What is the best way to access a specific key value within an array of objects nested within other objects?

Question

What is the best way to access a specific key value within an array of objects nested within other objects?

In my originalArrayData, I have an array structured as follows:

https://i.sstatic.net/soqgt.png

Expanding on this:

https://i.sstatic.net/H4jXh.png

The first item in the array is an object that contains multiple other objects. Here is an example of the contents of the array:

originalArrayData = [{
    "16": {
        "id": 22,
        "grid_row_id": 5,
        "grid_col_id": 16,
        "data": "10",
        "created_at": "rertte",
        "error_mgs": null
    },
    "header": "Row 2",
    "id": 5
},
{
    "17": {
        "id": 31,
        "grid_row_id": 9,
        "grid_col_id": 17,
        "data": "14",
        "created_at": "rtyhtyjtdyj",
        "error_mgs": null
    },
    "header": "Row 1",
    "id": 6
},
{
    "18": {
        "id": 35,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "55",
        "created_at": "thrtuhrs",
        "error_mgs": null
    },
    "header": "Row 1",
    "id": 6
}...........

Assume I have an array of ids, represented as follows (the numbers can vary and there may be 1, 3, or more items):

arrayOfIds: [16 , 17]

If the value of grid_col_id matches any value in arrayOfIds, how can I extract the 'data' value from each object and store it in a new array?

I already know how to extract an array of all ids from each first object in the array:

let data = this.arrayList.map((obj) => obj.id);

The result is: [5,6,7,8,9]. However, this is not what I need for my current task. So, I have the following approach:

var targetArr = []

this.originalArrayData.forEach(item=> {
    item.forEach(ins => {
        if(arrayOfIds.includes(ins.grid_col_id)
            targetArr.push(ins.data)
    })
})

This results in an error message: TypeError: row.forEach is not a function

My GOAL is: [10, 14, ...]

The target array includes 10 and 14 because, based on the originalArrayData, if grid_col_id matches any value from arrayOfIds, we extract the "data" value and place it into a new array.

How can I achieve this target array?

javascript arrays json foreach

Answer 1

Answer №1

Here is a step-by-step guide on how to achieve this with explanations provided in the code comments:

let od  = [{
    "16": {
        "id": 22,
        "grid_row_id": 5,
        "grid_col_id": 16,
        "data": "10",
        "created_at": "rertte",
        "error_mgs": null
    },
    "header": "Row 2",
    "id": 5
},
{
    "17": {
        "id": 31,
        "grid_row_id": 9,
        "grid_col_id": 17,
        "data": "14",
        "created_at": "rtyhtyjtdyj",
        "error_mgs": null
    },
    "header": "Row 1",
    "id": 6
},
{
    "18": {
        "id": 35,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "55",
        "created_at": "thrtuhrs",
        "error_mgs": null
    },
    "header": "Row 1",
    "id": 6
}]


let filter = [16, 17];

// convert original data into a flat array of objects
let dd = od.map(x => 
   // select object properties only
   Object.values(x)
   // filter out primitive types
   .filter(y => typeof y === "object")) 
   // flatten the array 
   .flat()
  
let result = dd  
   // filter objects based on the ids in the filter array
  .filter(x => filter.includes(x.grid_col_id))
  // select only the data property
  .map(x => x.data)

  console.log(result);

Answer 2

Here is a step-by-step guide on how to achieve this with explanations provided in the code comments:

let od  = [{
    "16": {
        "id": 22,
        "grid_row_id": 5,
        "grid_col_id": 16,
        "data": "10",
        "created_at": "rertte",
        "error_mgs": null
    },
    "header": "Row 2",
    "id": 5
},
{
    "17": {
        "id": 31,
        "grid_row_id": 9,
        "grid_col_id": 17,
        "data": "14",
        "created_at": "rtyhtyjtdyj",
        "error_mgs": null
    },
    "header": "Row 1",
    "id": 6
},
{
    "18": {
        "id": 35,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "55",
        "created_at": "thrtuhrs",
        "error_mgs": null
    },
    "header": "Row 1",
    "id": 6
}]


let filter = [16, 17];

// convert original data into a flat array of objects
let dd = od.map(x => 
   // select object properties only
   Object.values(x)
   // filter out primitive types
   .filter(y => typeof y === "object")) 
   // flatten the array 
   .flat()
  
let result = dd  
   // filter objects based on the ids in the filter array
  .filter(x => filter.includes(x.grid_col_id))
  // select only the data property
  .map(x => x.data)

  console.log(result);

Answer 3

Answer №2

Here is the code snippet for you:

const input=[{"16":{id:22,grid_row_id:5,grid_col_id:16,data:"10",created_at:"rertte",error_mgs:null},header:"Row 2",id:5},{"17":{id:31,grid_row_id:9,grid_col_id:17,data:"14",created_at:"rtyhtyjtdyj",error_mgs:null},header:"Row 1",id:6},{"18":{id:35,grid_row_id:9,grid_col_id:12,data:"55",created_at:"thrtuhrs",error_mgs:null},header:"Row 1",id:6}];

const arrayOfIds = [16 , 17];

const format = (array) => {
    return array.reduce((result, el) => {
        const key = Object.keys(el).find((key) => 'object' === typeof el[key]);
        
        if(arrayOfIds.includes(+key)){
            result.push(+el[key].data);
        }

        return result;
    }, []);
};

console.log(format(input));

Answer 4

Here is the code snippet for you:

const input=[{"16":{id:22,grid_row_id:5,grid_col_id:16,data:"10",created_at:"rertte",error_mgs:null},header:"Row 2",id:5},{"17":{id:31,grid_row_id:9,grid_col_id:17,data:"14",created_at:"rtyhtyjtdyj",error_mgs:null},header:"Row 1",id:6},{"18":{id:35,grid_row_id:9,grid_col_id:12,data:"55",created_at:"thrtuhrs",error_mgs:null},header:"Row 1",id:6}];

const arrayOfIds = [16 , 17];

const format = (array) => {
    return array.reduce((result, el) => {
        const key = Object.keys(el).find((key) => 'object' === typeof el[key]);
        
        if(arrayOfIds.includes(+key)){
            result.push(+el[key].data);
        }

        return result;
    }, []);
};

console.log(format(input));

Answer 5

Answer №3

Here's an alternate method that closely mirrors your initial approach.

To achieve this, you can utilize Object.keys, Object.hasOwn, and Array.prototype.find in JavaScript to retrieve the key associated with the property grid_col_id:

const originalArrayData = [{
    "16": {
        "id": 22,
        "grid_row_id": 5,
        "grid_col_id": 16,
        "data": "10",
    },
    "header": "Row 2",
    "id": 5
},
{
    "17": {
        "id": 31,
        "grid_row_id": 9,
        "grid_col_id": 17,
        "data": "14",
    },
    "header": "Row 1",
    "id": 6
},
{
    "18": {
        "id": 35,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "55",
    },
    "header": "Row 1",
    "id": 6
}]

const arrayOfIds = [16, 17]
const targetArr = []

originalArrayData.forEach(d => {
    const keyOfObjectWithGridCol = 
        // Obtain an array of all keys in the object
        Object.keys(d)
        // Find the key of the nested object that contains grid_col_id
        .find(key => Object.hasOwn(d[key], 'grid_col_id')) // Find property

    if (arrayOfIds.includes(d[keyOfObjectWithGridCol].grid_col_id)) {
        targetArr.push(d[keyOfObjectWithGridCol].data)
    }
})

console.log(targetArr) // Output: [10, 14]

Answer 6

Here's an alternate method that closely mirrors your initial approach.

To achieve this, you can utilize Object.keys, Object.hasOwn, and Array.prototype.find in JavaScript to retrieve the key associated with the property grid_col_id:

const originalArrayData = [{
    "16": {
        "id": 22,
        "grid_row_id": 5,
        "grid_col_id": 16,
        "data": "10",
    },
    "header": "Row 2",
    "id": 5
},
{
    "17": {
        "id": 31,
        "grid_row_id": 9,
        "grid_col_id": 17,
        "data": "14",
    },
    "header": "Row 1",
    "id": 6
},
{
    "18": {
        "id": 35,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "55",
    },
    "header": "Row 1",
    "id": 6
}]

const arrayOfIds = [16, 17]
const targetArr = []

originalArrayData.forEach(d => {
    const keyOfObjectWithGridCol = 
        // Obtain an array of all keys in the object
        Object.keys(d)
        // Find the key of the nested object that contains grid_col_id
        .find(key => Object.hasOwn(d[key], 'grid_col_id')) // Find property

    if (arrayOfIds.includes(d[keyOfObjectWithGridCol].grid_col_id)) {
        targetArr.push(d[keyOfObjectWithGridCol].data)
    }
})

console.log(targetArr) // Output: [10, 14]

What is the best way to access a specific key value within an array of objects nested within other objects?

Answer №1

Answer №2

Answer №3

Similar questions

Proper method for incorporating a single database pool across an Express application

Oops! Looks like Laravel has hit its limit with 256 nesting levels in the function

Anticipated the presence of a corresponding <div> within the server's HTML nested in another <div>

getting a null response when using the map feature - coding battles

Values returned by XmlHttpRequest

How to break up a text file into an array using regular expressions in PHP

Creating an Angular table row that can expand and collapse using ng-bootstrap components is a convenient and

Top-speed 3D to 2D transition with Numpy

I seem to be making a mistake in parsing a single object JSON - can anyone help me

Is there a way to implement DnD functionality on a dynamically generated div element within an HTML page using Dojo

In PHP, utilizing a for loop to create an array and then employing a separate for loop to manipulate that array

The forEach method is supported on FileList in CRA/Next JS applications, however, it does not work on FileList in Next JS applications created using

Utilizing Angular to automatically extract keys from nested objects in a response

Ensuring Code Execution Order in NODE.JS

Execute the controller function with the value as a parameter

Storing the API key returned by the Node.js store as a variable was

Converting an array of date strings to a single string in JavaScript

Discovering the mean value from a data set in a spreadsheet

Three.js: Spherical boundary of an object that has been resized

Initializing MongoDB server instance created by NodeJS using npm installation