What is the best way to store all the child elements of an object in an array?

Question

What is the best way to store all the child elements of an object in an array?

I'm facing a challenge with the Google People API where I have a promise and need to convert parts of the data into an array. However, I am struggling to create child elements within the array.

let newArray = [];

for (var i = 0; i < obj.length; i++) {
    newArray.push(obj[i].requestedResourceName);
    for (var j = 0; j < obj[i].person.names.length; j++) {
        if (obj[i].person.names[j].metadata.source.type === 'CONTACT') {
            newArray[i].push(obj[i].person.names[j]);
        }
    }
}

The problem I'm encountering is: Error: Uncaught (in promise): TypeError: newArray[i].push is not a function

angular typescript

Answer 1

Answer №1

When you use

arr.push(this.k4kItems[a].requestedResourceName)

, you are inserting something that is not an array into arr[a].

A better approach would be to include an object with a children property.

let arr = new Array();

for (var a = 0; a < this.k4kItems.length; a++) {
  // Adding object with children array
  arr.push({item: this.k4kItems[a].requestedResourceName, children: []});
  for (var b = 0; b < this.k4kItems[a].person.names.length; b++) {
    if (this.k4kItems[a].person.names[b].metadata.source.type === "CONTACT") { 
      // Pushing to that array, notice we use .children to push child items
      arr[a].children.push(this.k4kItems[a].person.names[b]);
    }
  }
}

For a more modern and elegant alternative using map and filter, check out the following code:

const arr = this.k4kItems.map(item => ({
    item,
    children: item.person.names.filter(
       name => name.metadata.source.type === "CONTACT"
    )
}))

Answer 2

When you use

arr.push(this.k4kItems[a].requestedResourceName)

, you are inserting something that is not an array into arr[a].

A better approach would be to include an object with a children property.

let arr = new Array();

for (var a = 0; a < this.k4kItems.length; a++) {
  // Adding object with children array
  arr.push({item: this.k4kItems[a].requestedResourceName, children: []});
  for (var b = 0; b < this.k4kItems[a].person.names.length; b++) {
    if (this.k4kItems[a].person.names[b].metadata.source.type === "CONTACT") { 
      // Pushing to that array, notice we use .children to push child items
      arr[a].children.push(this.k4kItems[a].person.names[b]);
    }
  }
}

For a more modern and elegant alternative using map and filter, check out the following code:

const arr = this.k4kItems.map(item => ({
    item,
    children: item.person.names.filter(
       name => name.metadata.source.type === "CONTACT"
    )
}))

Answer 3

Answer №2

It is important to make sure that you are only pushing arrays into your arr array. If

this.k4kItems[a].requestedResourceName

is not an array, then you will encounter an error.

Answer 4

It is important to make sure that you are only pushing arrays into your arr array. If

this.k4kItems[a].requestedResourceName

is not an array, then you will encounter an error.

What is the best way to store all the child elements of an object in an array?

Answer №1

Answer №2

Similar questions

The NbDatePicker does not display certain Spanish names

Mistakes that occur while trying to expand a base class to implement CRUD functionality

I attempted to retrieve the id field of a jsonwebtoken following the user's login, but unfortunately, I was unable to access it

List of suggestions for autocomplete in Angular

Embedding a table row within an anchor element in Angular 4

Tips for modifying a TypeScript object by its key value?

Is it possible to assign 'lodash' separately in a hybrid AngularJS/Angular application with SystemJS?

Oops! It seems like you forgot to indicate a command before proceeding. Make sure to check out the available commands using '--help'

Issues arise during the deployment of Angular7 production build when passing through the Bitbucket package manager

What is the reason for not receiving a transpilation error when referencing a non-exported class?

Creating a Proxy for an Array in TypeScript: A Step-by-Step Guide

Issues with Karma Testing: None of the Tests Executed Successfully

angular ngSubmit not functioning as expected (button embedded within and module incorporated)

Utilizing Angular components within the paperbits framework

Type property is necessary for all actions to be identified

The 'searchText' property is missing an initializer and is not definitively assigned within the constructor

The debugger extension for Visual Studio Code in Chrome, [webkit-debug-adapter], received a response from the target application, but was unable to find any valid target

Tips for showcasing a collection of interactive buttons (with each column as a button) utilizing mat-table within Angular 8

Typescript enables bidirectional control of Swiper

Having issues with the ASP.NET Web Api and Angular Frontend integration