Retrieve an array of object values using Angular and TypeScript

Question

Retrieve an array of object values using Angular and TypeScript

I'm attempting to extract the values of objects in an array using a nested for loop. I am receiving JSON data as shown below and have written the following TypeScript code to achieve this. However, I am unable to successfully bind the values to the template. Please see my code below:

Here is the TypeScript code snippet:

let totalData = results['data'];
     for (var i=0; i<totalData.length; i++)
        for (var task in totalData[i]) {
            console.log("Task: "+task);
            console.log("totalTests: "+task['totalTestCompleted']);
            console.log("totalOpenIssues: "+totalData[i][task].totalOpenIssues);
        }

The JSON data received from the REST API is as follows:

   [ 
    // JSON data snippet here
    ]

I am aiming to access the keys and values of the task object as shown below:

task.totalTests
task.totalOpenIssues

When attempting to extract the JSON array object values, I encounter the following error:

ERROR TypeError: Cannot read property 'totalTestCompleted' of null

I have tried to bind these values to the template but I am facing difficulties in extracting the array of JSON object values. Can someone provide guidance on this matter?

Thank you.

javascript arrays angular typescript

Answer 1

Answer №1

Ensure that all elements contain the necessary task information by checking for it.

for (var key in totalData) {
  console.log('Task id: ' + key);
  // Make sure not to miss out on any important details
  if (totalData[key].task) {
        console.log('Total tests: ' + totalData[key].task.totalTests);
    console.log('Total open issues: ' + totalData[key].task.totalOpenIssues);
  }
  else {
    console.log('No task');
  }
}

Additionally, keep in mind that using for (var task in totalData[i]) will iterate through all keys of the object:

var o = { a: 1, b: 2 };
for (var k in o) {
  console.log('Key: ' + k);
}

// The above will log
Key: a
Key: b

Previously, you were accessing all keys in the following manner:

id
createdDate
inactive
job
and so on...

Answer 2

Ensure that all elements contain the necessary task information by checking for it.

for (var key in totalData) {
  console.log('Task id: ' + key);
  // Make sure not to miss out on any important details
  if (totalData[key].task) {
        console.log('Total tests: ' + totalData[key].task.totalTests);
    console.log('Total open issues: ' + totalData[key].task.totalOpenIssues);
  }
  else {
    console.log('No task');
  }
}

Additionally, keep in mind that using for (var task in totalData[i]) will iterate through all keys of the object:

var o = { a: 1, b: 2 };
for (var k in o) {
  console.log('Key: ' + k);
}

// The above will log
Key: a
Key: b

Previously, you were accessing all keys in the following manner:

id
createdDate
inactive
job
and so on...

Answer 3

Answer №2

Your code has a few issues that need to be addressed. Based on the information provided, it seems that nested loops are not necessary. Additionally, there appears to be no reference to the totalTestCompleted key in your data.

let totalData = results['data'];
for (var i=0; i<totalData.length; i++) {
    // totalTestCompleted is missing: console.log("totalTests: "+task.totalTestCompleted);
    console.log("totalOpenIssues: "+ totalData[i].task.totalOpenIssues);
}

Answer 4

Your code has a few issues that need to be addressed. Based on the information provided, it seems that nested loops are not necessary. Additionally, there appears to be no reference to the totalTestCompleted key in your data.

let totalData = results['data'];
for (var i=0; i<totalData.length; i++) {
    // totalTestCompleted is missing: console.log("totalTests: "+task.totalTestCompleted);
    console.log("totalOpenIssues: "+ totalData[i].task.totalOpenIssues);
}

Retrieve an array of object values using Angular and TypeScript

Answer №1

Answer №2

Similar questions

Issue encountered when exporting with node and mongoose

Mapping a bar chart on a global scale

Using Swift 5 to Generate a Dictionary from an Array

Determine the value of an array element based on a specified

TinyMCE version 5.x - Stand out with a specific selection in a personalized drop-down navigation bar

Tips for implementing lazy loading of modals in Angular 7's module structure

Why does my Observable remain perpetually unfulfilled?

Linking several asynchronous functions together in JavaScript

The absence of CORS headers detected in XMLHttpRequest

Creating an HTML design with divs: a trio of pictures that adjusts in size to match the viewport (sl

How can I use ngx-editor to insert an HTML block at the current cursor position by clicking a button?

Tips for maintaining space beneath an image when text wraps around it

What could be causing my for loop to become unresponsive?

Retrieve information following an Ajax call inside a pre-designed template

After removing an item from the array, React fails to display the updated render

Is there a way to automatically redirect the main html page to a different html page upon logging in?

Using jQuery to populate an array with selected table items

Why is it necessary for me to utilize JSONP?

Identifying Whether Angular ng-repeat is Displaying Output or Not

Downsides of utilizing variables as global entities in React components