Traverse an Array of Objects nested within Objects using JavaScript

Question

Traverse an Array of Objects nested within Objects using JavaScript

I am seeking assistance with a JavaScript problem.

Despite researching and trying different solutions for hours, I am still missing something crucial.

It seems like a simple task, so please forgive my lack of knowledge.

How can I loop through an Array of Objects within Objects in JavaScript?

I have learned that one should use a for...in loop for arrays and a simple for loop for objects. However, I am struggling to figure out how to loop through an array of objects within an object.

Here is my goal:

I want to display a list of reports (report names) in my UI that match a specific ReportTemplateTypeId.

To achieve this, I need to iterate through my retrieved data after making a data call to build the list.

The report names I want to display must have a ReportTemplateTypeId equal to 1.

My retrieved data looks like this: SelectableReportTemplateNames: [{{}},{{}},{{}},{{}}] containing an Object within an Object within an Array.

Below is an example of the data, featuring 4 records I would like to add to my list:

"SelectableReportTemplateNames": [
    {
        "ReportTemplateId": 1,
        "ReportTemplateName": "Proof of Receipt",
        "ReportTemplatePath": "...rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 2,
            "ReportTemplateTypeDescription": "Inventory - Proof of Receipt",
            "Id": null
        },
        "Id": "5653781274d4f23d4cbb54b8"
    },
    {
        "ReportTemplateId": 2,
        "ReportTemplateName": "Proof of Transfer",
        "ReportTemplatePath": ".....rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 3,
            "ReportTemplateTypeDescription": "Inventory - Proof of Transfer",
            "Id": null
        },
        "Id": "5653781274d4f23d4cbb54b9"
    },
    {
        "ReportTemplateId": 11,
        "ReportTemplateName": "All Calls Report",
        "ReportTemplatePath": "....rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "All Calls Report",
            "Id": null
        },
        "Id": "5739a89577801d7f0c10254c"
    },
    {
        "ReportTemplateId": 12,
        "ReportTemplateName": "High Priority Calls Report",
        "ReportTemplatePath": "......rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "High Priority Calls Report",
            "Id": null
        },
        "Id": "5739a89e77801d7f0c10254d"
    },
    {
        "ReportTemplateId": 13,
        "ReportTemplateName": "Call Asset Lines Report",
        "ReportTemplatePath": "......rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "Call Asset Lines Report",
            "Id": null
        },
        "Id": "5739aa7d77801d7f0c10254e"
    },
    {
        "ReportTemplateId": 16,
        "ReportTemplateName": "Daily Status Report",
        "ReportTemplatePath": ".....rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "Daily Status Report",
            "Id": null
        },
        "Id": "5739abb077801d7f0c102552"
    }
],

Your help is greatly appreciated!

javascript arrays angularjs

Answer 1

Answer №1

If you only need to print certain values, you can apply the logic directly in the view.

Check out the updated JSFiddle here

View Binding

<select 
  ng-model="test"
  ng-options="item.ReportTemplateId as item.ReportTemplateName for item in data.SelectableReportTemplateNames | filter:isValid">
</select>

Filter function

$scope.isValid = function(o) {
  return o.ReportTemplateType.ReportTemplateTypeId == 1;
}

Demo

function myCtrl($scope) {
  $scope.data = {
    "SelectableReportTemplateNames": [{
      "ReportTemplateId": 1,
      "ReportTemplateName": "Proof of Receipt",
      "ReportTemplatePath": "...rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 2,
        "ReportTemplateTypeDescription": "Inventory - Proof of Receipt",
        "Id": null
      },
      "Id": "5653781274d4f23d4cbb54b8"
    }, {
      "ReportTemplateId": 2,
      "ReportTemplateName": "Proof of Transfer",
      "ReportTemplatePath": ".....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 3,
        "ReportTemplateTypeDescription": "Inventory - Proof of Transfer",
        "Id": null
      },
      "Id": "5653781274d4f23d4cbb54b9"
    }, {
      "ReportTemplateId": 11,
      "ReportTemplateName": "All Calls Report",
      "ReportTemplatePath": "....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "All Calls Report",
        "Id": null
      },
      "Id": "5739a89577801d7f0c10254c"
    }, {
      "ReportTemplateId": 12,
      "ReportTemplateName": "High Priority Calls Report",
      "ReportTemplatePath": "......rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "High Priority Calls Report",
        "Id": null
      },
      "Id": "5739a89e77801d7f0c10254d"
    }, {
      "ReportTemplateId": 13,
      "ReportTemplateName": "Call Asset Lines Report",
      "ReportTemplatePath": "......rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "Call Asset Lines Report",
        "Id": null
      },
      "Id": "5739aa7d77801d7f0c10254e"
    }, {
      "ReportTemplateId": 16,
      "ReportTemplateName": "Daily Status Report",
      "ReportTemplatePath": ".....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "Daily Status Report",
        "Id": null
      },
      "Id": "5739abb077801d7f0c102552"
    }]
  }
  
  $scope.isValid = function(o){
  return o.ReportTemplateType.ReportTemplateTypeId == 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <select 
      ng-model="test"
      ng-options="item.ReportTemplateId as item.ReportTemplateName for item in data.SelectableReportTemplateNames | filter:isValid">
    </select>
  </div>
</div>

Note: This solution assumes that ReportTemplateType will always be an object and not an array.

Answer 2

If you only need to print certain values, you can apply the logic directly in the view.

Check out the updated JSFiddle here

View Binding

<select 
  ng-model="test"
  ng-options="item.ReportTemplateId as item.ReportTemplateName for item in data.SelectableReportTemplateNames | filter:isValid">
</select>

Filter function

$scope.isValid = function(o) {
  return o.ReportTemplateType.ReportTemplateTypeId == 1;
}

Demo

function myCtrl($scope) {
  $scope.data = {
    "SelectableReportTemplateNames": [{
      "ReportTemplateId": 1,
      "ReportTemplateName": "Proof of Receipt",
      "ReportTemplatePath": "...rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 2,
        "ReportTemplateTypeDescription": "Inventory - Proof of Receipt",
        "Id": null
      },
      "Id": "5653781274d4f23d4cbb54b8"
    }, {
      "ReportTemplateId": 2,
      "ReportTemplateName": "Proof of Transfer",
      "ReportTemplatePath": ".....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 3,
        "ReportTemplateTypeDescription": "Inventory - Proof of Transfer",
        "Id": null
      },
      "Id": "5653781274d4f23d4cbb54b9"
    }, {
      "ReportTemplateId": 11,
      "ReportTemplateName": "All Calls Report",
      "ReportTemplatePath": "....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "All Calls Report",
        "Id": null
      },
      "Id": "5739a89577801d7f0c10254c"
    }, {
      "ReportTemplateId": 12,
      "ReportTemplateName": "High Priority Calls Report",
      "ReportTemplatePath": "......rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "High Priority Calls Report",
        "Id": null
      },
      "Id": "5739a89e77801d7f0c10254d"
    }, {
      "ReportTemplateId": 13,
      "ReportTemplateName": "Call Asset Lines Report",
      "ReportTemplatePath": "......rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "Call Asset Lines Report",
        "Id": null
      },
      "Id": "5739aa7d77801d7f0c10254e"
    }, {
      "ReportTemplateId": 16,
      "ReportTemplateName": "Daily Status Report",
      "ReportTemplatePath": ".....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "Daily Status Report",
        "Id": null
      },
      "Id": "5739abb077801d7f0c102552"
    }]
  }
  
  $scope.isValid = function(o){
  return o.ReportTemplateType.ReportTemplateTypeId == 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <select 
      ng-model="test"
      ng-options="item.ReportTemplateId as item.ReportTemplateName for item in data.SelectableReportTemplateNames | filter:isValid">
    </select>
  </div>
</div>

Note: This solution assumes that ReportTemplateType will always be an object and not an array.

Answer 3

Answer №2

To access each element, you can use the Array#forEach method.

var data = { "Items": [{ "ItemId": 1, "ItemName": "Apple", "ItemCategory": "Fruit", "Price": 1.99 }, { "ItemId": 2, "ItemName": "Banana", "ItemCategory": "Fruit", "Price": 0.99 }, { "ItemId": 3, "ItemName": "Carrot","ItemCategory": "Vegetable", "Price": 0.75	}]};
data.Items.forEach(function (item) {
    if (item.ItemCategory === 'Fruit') {
        console.log(item.ItemName + '-' + item.Price);
    }
});

Answer 4

To access each element, you can use the Array#forEach method.

var data = { "Items": [{ "ItemId": 1, "ItemName": "Apple", "ItemCategory": "Fruit", "Price": 1.99 }, { "ItemId": 2, "ItemName": "Banana", "ItemCategory": "Fruit", "Price": 0.99 }, { "ItemId": 3, "ItemName": "Carrot","ItemCategory": "Vegetable", "Price": 0.75	}]};
data.Items.forEach(function (item) {
    if (item.ItemCategory === 'Fruit') {
        console.log(item.ItemName + '-' + item.Price);
    }
});

Answer 5

Answer №3

Step 1: Obtain the array

let dataEntries = data["SelectableReportTemplateNames"];

,

assuming your main object is named data.

Step 2: Iterate through the array

for (let j = 0; j < dataEntries.length; j++) { 
    //perform actions here
}

Step 3: Display data based on conditions

for (let k = 0; k < dataEntries.length; k++) { 
    if(dataEntries[k]["ReportTemplateType"]["ReportTemplateTypeId"] == 1) {
        console.log(dataEntries[k]["ReportTemplateName"]);
    }
}

Keep in mind, objects and arrays can be accessed similarly through indexing (e.g. data["key"]) and direct access (e.g. data.key)

Answer 6

Step 1: Obtain the array

let dataEntries = data["SelectableReportTemplateNames"];

,

assuming your main object is named data.

Step 2: Iterate through the array

for (let j = 0; j < dataEntries.length; j++) { 
    //perform actions here
}

Step 3: Display data based on conditions

for (let k = 0; k < dataEntries.length; k++) { 
    if(dataEntries[k]["ReportTemplateType"]["ReportTemplateTypeId"] == 1) {
        console.log(dataEntries[k]["ReportTemplateName"]);
    }
}

Keep in mind, objects and arrays can be accessed similarly through indexing (e.g. data["key"]) and direct access (e.g. data.key)

Answer 7

Answer №4

If your structure remains constant for a while, it may be beneficial to hardcode your loops:

let data = myData["SelectableReportTemplateNames"];
for (let i = 0; i < data.length; i++) {
    let currentObject = data[i];
    // handle objects here

   let templateType - currentObject["ReportTemplateType"];

   for (let property in templateType) {
       // handle properties of template type.
       // property variable contains the name of the current property in this loop.
   }
}

Answer 8

If your structure remains constant for a while, it may be beneficial to hardcode your loops:

let data = myData["SelectableReportTemplateNames"];
for (let i = 0; i < data.length; i++) {
    let currentObject = data[i];
    // handle objects here

   let templateType - currentObject["ReportTemplateType"];

   for (let property in templateType) {
       // handle properties of template type.
       // property variable contains the name of the current property in this loop.
   }
}

Answer 9

Answer №5

//test this out;

$.each(data,DisplayableReportModels,function(x,y){

console.log(y.ReportModelId); console.log(y.ReportModelName);

});

Answer 10

//test this out;

$.each(data,DisplayableReportModels,function(x,y){

console.log(y.ReportModelId); console.log(y.ReportModelName);

});

Answer 11

Answer №6

const templateArray = yourArrayName["SelectableReportTemplateNames"];

$scope.filteredTemplates = templateArray.filter(function(template){
  return template.ReportTemplateId === 1;
 })
//The filteredTemplates array will now contain all templates with ReportTemplateId of 1

//To use in ng-repeat:
<p ng-repeat="template in filteredTemplates">{{template.ReportTemplateName}}</p>

Answer 12

const templateArray = yourArrayName["SelectableReportTemplateNames"];

$scope.filteredTemplates = templateArray.filter(function(template){
  return template.ReportTemplateId === 1;
 })
//The filteredTemplates array will now contain all templates with ReportTemplateId of 1

//To use in ng-repeat:
<p ng-repeat="template in filteredTemplates">{{template.ReportTemplateName}}</p>

Answer 13

Answer №7

Using MongoDb

db.YourCollection.find({ "SelectableReportTemplateNames.ReportTemplateType.ReportTemplateTypeId" : 1});

Implemented in JavaScript

var resultTemplate = _.find(SelectableReportTemplateNames,function(eachTemplate){
  return eachTemplate.ReportTemplateType.ReportTemplateTypeId == 1;
})

Answer 14

Using MongoDb

db.YourCollection.find({ "SelectableReportTemplateNames.ReportTemplateType.ReportTemplateTypeId" : 1});

Implemented in JavaScript

var resultTemplate = _.find(SelectableReportTemplateNames,function(eachTemplate){
  return eachTemplate.ReportTemplateType.ReportTemplateTypeId == 1;
})

Answer 15

Answer №8

Check out the Mozilla Developer Network - Arrays and Mozilla Developer Network - Objects for all your data manipulation needs.

TIPS

If you have your data stored in a variable called data, you can use the following code snippet to filter elements based on your condition:

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateId === 1);
});
/*RESULT
[{
        "ReportTemplateId" : 1,
        "ReportTemplateName" : "Proof of Receipt",
        "ReportTemplatePath" : "...rdlc",
        "ReportTemplateType" : {
            "ReportTemplateTypeId" : 2,
            "ReportTemplateTypeDescription" : "Inventory - Proof of Receipt",
            "Id" : null
        },
        "Id" : "5653781274d4f23d4cbb54b8"
    }
]
*/

You can then use forEach to iterate through the filtered elements and display their results:

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateId === 1);
}).forEach(function (el) {
    console.log(el.ReportTemplateName);
    alert(el.ReportTemplateName);
});
/* ALERTS AND CONSOLE LOGS: "Proof of Receipt" */

UPDATE 1

I misunderstood the question initially, here is the corrected code that filters by ReporttemplateTypeId instead of ReportTemplateId:

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateType.ReportTemplateTypeId === 1);
}).forEach(function (el) {
    console.log(el.ReportTemplateName);
    alert(el.ReportTemplateName);
});
/* OUTPUT
All Calls Report
High Priority Calls Report
Call Asset Lines Report
Daily Status Report
/*

Answer 16

Check out the Mozilla Developer Network - Arrays and Mozilla Developer Network - Objects for all your data manipulation needs.

TIPS

If you have your data stored in a variable called data, you can use the following code snippet to filter elements based on your condition:

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateId === 1);
});
/*RESULT
[{
        "ReportTemplateId" : 1,
        "ReportTemplateName" : "Proof of Receipt",
        "ReportTemplatePath" : "...rdlc",
        "ReportTemplateType" : {
            "ReportTemplateTypeId" : 2,
            "ReportTemplateTypeDescription" : "Inventory - Proof of Receipt",
            "Id" : null
        },
        "Id" : "5653781274d4f23d4cbb54b8"
    }
]
*/

You can then use forEach to iterate through the filtered elements and display their results:

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateId === 1);
}).forEach(function (el) {
    console.log(el.ReportTemplateName);
    alert(el.ReportTemplateName);
});
/* ALERTS AND CONSOLE LOGS: "Proof of Receipt" */

UPDATE 1

I misunderstood the question initially, here is the corrected code that filters by ReporttemplateTypeId instead of ReportTemplateId:

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateType.ReportTemplateTypeId === 1);
}).forEach(function (el) {
    console.log(el.ReportTemplateName);
    alert(el.ReportTemplateName);
});
/* OUTPUT
All Calls Report
High Priority Calls Report
Call Asset Lines Report
Daily Status Report
/*

Traverse an Array of Objects nested within Objects using JavaScript

Answer №1

View Binding

Filter function

Demo

Answer №2

Answer №3

Step 1: Obtain the array

Step 2: Iterate through the array

Step 3: Display data based on conditions

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Combining Multiple NodeLists in Javascript

Replace Jade script with block override

Creating an Ajax script to show a comment or information box when a webpage fails to load

Struggling to access the `this` keyword within a callback function in an Angular Controller class using ES

Unlocking route access through server-side Firebase authentication

Track the reading progress of each article on a single page with individual progress bars

Ensure AngularJS creates a controller just once

Extract the JSON value from a JavaScript variable using the index value function

Implementing Secure Authentication in a Fresh MEANJS Module

Difficulty Establishing a Connection with SQL Server Using TypeORM

Should I avoid using `v-on` in my code?

Best practice for placing business logic following an $.ajax request

Prevent selection of weekends and dates in the past using AngularJS

Exploring color gradation using GLSL shaders in WebGL

Managing channel permissions in Discord.js

Building Relationships in LoopBack version 4 Using the Include Key

When using jQuery.load(), images echoed through Ajax are not loading properly

Validation error detected in the textbox fields

Determine the daily volume of emails sent from the "no-reply email" address using the Nodemailer library

Append a constant string to the conclusion of the route parameter