Encountering issues with ng-repeat in the third iteration

Having Trouble with ng-repeat on the Third Loop (Third Level)

    <div ng-repeat="child in jdata.children">
        <div ng-repeat="childsub in child.children">
            <div ng-repeat="text in childsub.text">
              {{ text.value}}
            </div>
        </div>
    </div>

The issue seems to be occurring on the third loop.

If you'd like to see the JSON data, here is a link to Plunker:

{
  "children": [
    {
      "type": "layer",
      "visible": true,
      "opacity": 1,
      "blendingMode": "normal",
      "name": "border",
      "left": 0,
      "right": 320,
      "top": 0,
      "bottom": 50,
      "height": 50,
      "width": 320,
      "mask": {},
      "image": {}
    },
    {
      "type": "group",
      "visible": false,
      "opacity": 1,
      "blendingMode": "normal",
      "name": "Frame 1",
      "left": -26,
      "right": 338,
      "top": 0,
      "bottom": 182,
      "height": 182,
      "width": 364,
      "childrens": [
        {
          "type": "layer",
          "visible": true,
          "opacity": 1,
          "blendingMode": "normal",
          "name": "Savings that will make you smile like Barney",
          "left": 117,
          "right": 290,
          "top": 7,
          "bottom": 44,
          "height": 37,
          "width": 173,
          "mask": {},
          "text": {
            "value": "Savings that will make\ryou smile like Barney",
            "font": {
              "name": "VAGRoundedStd-Bold",
              "sizes": [
                13,
                13,
                13,
                13,
                13
              ],
              "colors": [
                [
                  91,
                  64,
                  142,
                  255
                ],
                [
                  91,
                  64,
                  142,
                  255
                ],
                [
                  91,
                  64,
                  142,
                  255
                ],
                [
                  236,
                  0,
                  140,
                  255
                ],
                [
                  91,
                  64,
                  142,
                  255
                ]
              ],
              "alignment": [
                "center",
                "center"
              ]
            },
            "left": 0,
            "top": 0,
            "right": 0,
            "bottom": 0,
            "transform": {
              "xx": 1.3601764888729304,
              "xy": 0,
              "yx": 0,
              "yy": 1.3627518109295933,
              "tx": 203.50000000000003,
              "ty": 20.704124478480498
            }
          },
          "image": {}
        }
      ]
    }
  ],
  "document": {
    "width": 320,
    "height": 50,
    "resources": {
      "layerComps": [],
      "guides": [],
      "slices": []
    }
  }
}
javascriptangularjsjson

Answer №1

You've made a spelling error with 'childrens' in the second tier.

   <div ng-repeat="child in jdata.children">
        <div ng-repeat="childsub in child.childrens">
            <div ng-repeat="text in childsub.text">
              <span>{{text.name}}</span>
            </div>
        </div>
    </div>

Answer №2

The second child of the div element does not have an attribute called "children". Instead of using children, you should use childrens as the attribute name in the second div. Making this change will ensure that it functions correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a delay before calling the owlCarousel function?

Is there a way to delay calling the owlCarousel function for 5 seconds? I attempted the following: $(document).ready(function(){ setInterval(function(){ $(".demo-slide").owlCarousel(); },5000); }); However, I encountered ...

javascriptjqueryowl-carousel

Is the alias name absolute or converted to AliasId when establishing a connection with Sequelize and Migrations?

In my Housing model, I have a sequelize association set up like this: Housing.belongsTo(models.User, {as : Owner}); When adding the column to the model and Migrations file with this association, will the table be named "Owner" exactly as the Alias, or "Ow ...

javascriptpostgresqlmigrationsequelize.js

How to create dynamic transition effects in modal using AngularJS

My modal includes a next button for easy navigation. Initially, the modal showcases content within: <div ng-show="step1"></div> Upon clicking the next button, the modal transitions to display different contents in 'step2' within th ...

cssangularjs

Error: Unable to execute function abc, it is not defined as a function in this context

Having trouble with a fronted or JavaScript issue where it can't find the defined function in the file. I'm working on integrating Apple Pay and need to call the back-end API based on a specific event. Here is my code. ACC.payDirect = { _autoload ...

javascriptjquerytypescript

What are the steps to convert a postgresql select query with a join into a JSON object?

Looking to convert the output of a select query with joins into a JSON object. Consider this example query: select cm.*, e.*, u.* from chat_messages cm, events e, users u where cm.event_id = e.id and cm.user_id = u.id Th ...

sqljsonpostgresqljoin

How to utilize FileReader for parsing a JSON document?

I'm currently facing an issue while attempting to read and copy a JSON file uploaded by the user into an array. When using .readAsText(), the returned data includes string formatting elements like \" and \n. Is there a way to utilize FileRe ...

javascripttypescriptfilereader

Deactivate every checkbox in a row within an array

Seeking assistance with disabling a specific checkbox within a row. For example, Consider the following scenario {availableBendsHostnames?.map((bEnds, indx) => ( <div key={indx}> <div>B-End: {bEnds}</div> ...

javascriptreactjsmaterial-ui

When attempting to insert data into MongoDB with node.js, an issue arises: "TypeError: Unable to access property 'username' of undefined."

I recently set up a MongoDB database and attempted to add data via a POST request using the Postman application. Upon successful creation of the database, a confirmation message was displayed. Here is the code snippet I used: users.js file: const router = ...

javascriptnode.jsmongodbexpresspostman

Once the grunt build process is complete, execute "heroku run fileName" to launch the

In order to gain a deeper understanding of Heroku scheduling, I decided to delve into an informative post on the topic and followed the instructions provided to build the app. The highlight of the post was when I successfully executed heroku run numCheck a ...

javascriptnode.jsangularjsherokuyeoman

Incorporating JSON data into an HTML table using AJAX (when response is not iterable)

I am facing an issue with storing data from a JSON object into an HTML table. Although I can see the data in my console when I log it in my Impl class, I am unable to display it in the table. Here is my JSON Object: { "vehicleRegID":"V001", ...

javascriptjqueryjsonajax

Node.js unleashes the power of Ajax

I have seen some people ask this question before, but I am having trouble understanding the responses :/ I am working with node.js and really want to utilize Ajax in my project. Here is a snippet of my code: var $ = require('jquery'); var http ...

javascriptjqueryajaxnode.js

Function that contains a JavaScript reference and observation

I'm experiencing issues with the code below and I'm having trouble figuring out what's causing the problem. function some(){ for (var i=0;i<....;i++) { var oneObject; ...some logic where this object is set oneObject.watch(prop ...

javascriptwatch

Encountering continuous errors during NPM installation

As a newcomer to React, I'm facing challenges in building components and getting my page up and running while following a tutorial. When attempting to npm install dropzone, I encounter a barrage of error messages and an empty tree when checking npm li ...

javascriptnode.jsreactjsnpmreact-dropzone

Retrieve GET ajax requests from a webpage by simply entering the URL

Here's an example from the API I'm currently working with: This particular page relies heavily on GET calls to load most of the data. Three main calls that catch my interest are: All these calls share a common feature, which is the numeric ID ...

javascriptphpjqueryajax

Issue with creating a custom YouTube navigation bar positioned above suggested video content

bar image Currently, I am attempting to recreate this navigation bar for my YouTube-inspired project. Although I have successfully made the background of the buttons fade using linear-gradient, I am unsure how to apply the same effect to the text itself. ...

javascripthtmlcssyoutube

Unable to hide jQuery form and receiving undefined function output

I seem to be facing an issue with one of the buttons. It's not functioning properly. Whenever I click on the "Add Run" button followed by the "Home" button, most functions stop working as expected. The dynamically created form doesn't hide, the ...

javascriptjqueryfunctionbutton

Collecting information from JSON files

Within the cells of my calendar are placeholders for events, dates, participants, and descriptions. Now, I am looking to populate these placeholders with data previously stored using localStorage. Unfortunately, my current code is not achieving this. How ...

javascriptjson

Assistance needed for upgrading database features

Currently, I'm developing a back-end feature for a client that involves the ability to add new records and modify existing ones using a simple interface. Despite making progress, I've hit a roadblock and realize my initial approach may not have b ...

phpjavascriptjquerymysqlcodeigniter

How can one address the issue of undefined data within table cells?

I have encountered an issue while reading and displaying an XML file on a webpage using a JavaScript script. The problem arises when the page loads, and the information inside the cells of the table shows as "UNDEFINED". The intended display should include ...

javascripthtmlxmlhtml-tableundefined

What can I do to resolve a node server issue with the error message "npm ERR! code ELIFECYCLE npm ERR! errno 1"?

npm ERROR! code ELIFECYCLE npm ERROR! errno 1 npm ERROR! [email protected] start: node server npm ERROR! Exit status 1 npm ERROR! npm ERROR! Task failed at the [email protected] start script. npm ERROR! This may not necessarily be an ...

javascriptnode.jsexpressnpm