{"id":12926,"date":"2022-10-02T11:14:47","date_gmt":"2022-10-02T05:44:47","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/"},"modified":"2022-10-02T11:14:47","modified_gmt":"2022-10-02T05:44:47","slug":"solved-how-to-append-children-to-object-dynamically","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/","title":{"rendered":"[Solved] How to append children to object dynamically"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

The most easy way is pass as argument the index of “terms”. Put two buttons, one to AddTerms and another one to hideTerms\/showTerms.<\/p>\n

<div *ngFor = \"let term of terms;let i=index\">\n <!--see the way to get the index of the array -->\n  <div class=\"row tr\">\n    {{term.id}}\n    <!--you make a link, I use a button-->\n    <!--the button \"add\" is visible when there're NOT \"children\"-->\n    <button *ngIf=\"!term.terms\" (click)=\"addTerms(i)\">Add<\/button>  \n    <!--the button to Show\/hide is visible when there ARE \"children\"-->\n    <button *ngIf=\"term.terms\" (click)=\"term.show=!term.show\">\n      <span *ngIf=\"term.show\">^<\/span>\n      <span *ngIf=\"!term.show\">v<\/span>\n    <\/button>\n  <\/div>\n  <ng-container *ngIf =\"term.terms && term.show\">\n    <app-icd-codes [terms]=\"term.terms\"><\/app-icd-codes>\n  <\/ng-container>\n<\/div>\n<\/code><\/pre>\n
Then you must put your function addTerms. A simple function can be like<\/p>\n
\/\/see that you received the \"index\" of children\naddTerms(index: number) {\n    this.terms[index].show = true; \/\/<--to show the children\n    this.terms[index].terms = [{ id: 3 }, { id: 4 }]; \/\/a \"easy\" way to add\n  }\n<\/code><\/pre>\n
Ok, really the function must be like<\/p>\n
addTerms(index: number) {\n    let id=this.terms[index].id; \/\/we get the \"id\"\n    \/\/call a httpClient and subscribe\n    this.httpClient.get(\"url\/\"+id).subscribe(res=>\n          \/\/in the subscription\n          {\n             this.terms[index].show = true; \/\/<--to show the children\n             this.terms[index].terms = res\n          })\n}\n<\/code><\/pre>\n
NOTE: Can result “strange” add new properties to an Object (in this case “children” and “show”). If we feel more confortable, we can add the properies when we create the object with a null value<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to append children to object dynamically <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The most easy way is pass as argument the index of “terms”. Put two buttons, one to AddTerms and another one to hideTerms\/showTerms. <div *ngFor = “let term of terms;let i=index”> <!–see the way to get the index of the array –> <div class=”row tr”> {{term.id}} <!–you make a link, I use a button–> … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[732,333],"class_list":["post-12926","post","type-post","status-publish","format-standard","hentry","category-solved","tag-angular","tag-javascript"],"yoast_head":"\n[Solved] How to append children to object dynamically - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to append children to object dynamically - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The most easy way is pass as argument the index of “terms”. Put two buttons, one to AddTerms and another one to hideTerms\/showTerms. <div *ngFor = "let term of terms;let i=index"> <!--see the way to get the index of the array --> <div class="row tr"> {{term.id}} <!--you make a link, I use a button--> ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-02T05:44:47+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to append children to object dynamically\",\"datePublished\":\"2022-10-02T05:44:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\"},\"wordCount\":97,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"angular\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\",\"name\":\"[Solved] How to append children to object dynamically - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-02T05:44:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to append children to object dynamically\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to append children to object dynamically - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to append children to object dynamically - JassWeb","og_description":"[ad_1] The most easy way is pass as argument the index of “terms”. Put two buttons, one to AddTerms and another one to hideTerms\/showTerms. <div *ngFor = \"let term of terms;let i=index\"> <!--see the way to get the index of the array --> <div class=\"row tr\"> {{term.id}} <!--you make a link, I use a button--> ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/","og_site_name":"JassWeb","article_published_time":"2022-10-02T05:44:47+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to append children to object dynamically","datePublished":"2022-10-02T05:44:47+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/"},"wordCount":97,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["angular","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/","name":"[Solved] How to append children to object dynamically - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-02T05:44:47+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-append-children-to-object-dynamically\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to append children to object dynamically"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/12926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=12926"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/12926\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=12926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=12926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=12926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}