Showing nested JSON data in ng-repeat

Currently, I'm struggling to understand how to access nested JSON and show it on a page using Angular. For instance, consider the JSON structure below where I want to display connectivity products under portfolio using ng-repeat...


{
"addons": [
    ...
],

"attributes": [     
    ...
],
"portfolios": [
    {
        "connectivity": [
            {
                "product-1": {
                    "label": "product-1",
                    "description": "Description in here"
                }
            },
            {
                "product-2": {
                    "label": "product-2",
                    "description": "Description in here"
                }
            }
        ]

    }
]

}

I've attempted two different approaches so far.

$scope.listOfProducts = allProducts.data.portfolios.connectivity;

and in the ng-repeat

ng-repeat='product in listOfProducts.portfolios.connectivity'

If you could advise on the correct method to iterate through and display the 'connectivity' products with ng-repeat, I would greatly appreciate it. Thanks!

EDIT:

I revised the JSON like this...


{
"addons": [
...
],

"attributes": [     
    ...
],
"portfolios": [
{
    "connectivity": [
        {
                "label": "product-1",
                "description": "Description in here"
        },
        {
                "label": "product-2",
                "description": "Description in here"
        }
    ]
}
]

However, I'm still unable to utilize ng-repeat for displaying the products in connectivity.

$scope.listOfProducts = allProducts.data.portfolios.connectivity

javascriptjsonangularjs

Answer №1

Given that listOfProducts is already assigned to the connectivity array, you simply need to use 

ng-repeat="product in listOfProducts"

<div ng-repeat="product in listOfProducts">
  {{product.label}}
</div>

Update: It appears that your array structure is somewhat irregular, as you are creating a property named product-[index] for each item. Are you able to modify the data being returned? Ideally, your array should just contain objects like this:

"connectivity": [
    {
        "label": "product-1",
        "description": "Description goes here"
    },
    {
        "label": "product-2",
        "description": "Description goes here"
    }
]

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

When functions are sent to children of a react component, they do not inherit the context of the parent

I'm facing an issue while working with React where I am encountering difficulty passing a function from a parent component to multiple children components. The function calls other functions that are also housed within the parent component. Although ...

javascriptreactjscomponentsundefinedreact-props

The unusual spinning behavior of child elements in three.js

My current project involves implementing an experimental version of a 2x2x2 Rubik's Cube. I have gathered insights from two previous posts that addressed issues related to attaching and detaching child objects in Three.js: Three.js: Proper way to add ...

javascriptrotationthree.js

I must develop a custom function that generates a pure JavaScript string with the 'name' index and includes all the 'props'

My code is almost correct, but instead of returning a ':' in the Json result as desired, it returns a ','. Is there a way to achieve the desired result without modifying the JSON string like I did with the "replaces"? I am searching fo ...

javascriptarraysjson

Exploring Elasticsearch with Ajax Query Syntax

Attempting to send a post request via AJAX to my Elasticsearch index but encountering some issues. Here's the cURL result: [~]$ curl -XGET 'http://localhost:9200/firebase/_search?q=song:i%20am%20in' {"took":172,"timed_out":false,"_shards": ...

javascriptjqueryajaxcurlelasticsearch

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

javascriptjqueryajax

Customizing the initial page layout in Elm

I am new to Elm and I need help with a particular issue. Can someone provide guidance or direct me to a useful resource for solving this problem? The challenge I’m facing involves editing the start page of a website by removing specific elements, as list ...

javascripthtmltypescriptsasselm

Retrieving text content from multiple classes with a single click event

There are numerous elements each having class names p1, p2, p3,...p14. Consequently, when attempting to extract text from the clicked class, text from all classes is retrieved! For instance, if the expected text is 80, it ends up being 808080080808080808 ...

javascriptjquery

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Within my VS Code workspace, I am using the Typescript language and would like to format my comments across multiple lines with a specific style (look out for the star character) /** *@desc any text * any text */ However, when I attempt to write a comm ...

javascripttypescriptvisual-studio-code

Retrieving the content of input elements within a div post removal

I have a situation where I need to dynamically add input text fields inside a div and then delete the div while retaining the values of the input field in a variable. Here's an example code snippet that demonstrates this: $(document).ready(funct ...

javascriptjquery

Developing a Javascript widget feature

I have a concern regarding the functionality of Javascript widgets. The widget I'm working on embeds content onto a page without using iframes, which has been effective so far. However, there are instances where certain user layouts cause the widget t ...

javascriptwidget

How can we incorporate Django template tags into our jQuery/JavaScript code?

Is it possible to incorporate Django's template tags within JavaScript code? For example, utilizing {% form.as_p %} in jQuery to dynamically inject forms onto the webpage. ...

javascriptjquerydjangodjango-templates

Using AJAX along with the append method to dynamically add identical HTML content multiple times to a single element

Although I have successfully implemented most of the desired functionality with this JavaScript code, there is a persistent bug that is causing unnecessary duplicates to be created when appending HTML. Detecting Multiples The problem lies in the fact tha ...

javascriptjqueryajax

Angular's parent div height can be adjusted using CSS transitions

I have implemented a CSS transition to create a sliding effect in my pagination. However, I am facing an issue where the height of the containing div changes even when I set the position of the transitioned elements. Here is a snippet of my CSS: .slide { ...

javascriptcssangularjscss-transitions

Challenges in achieving two-way data binding with directives, controllers, and services

My mind is preoccupied with a particular issue at the moment. There is a service responsible for managing logo panels and a function used for navigating between these panels. When the getPanels function is called, it sets the currentPanel, index, and leng ...

angularjs

The NestJS error code 413 indicates that the payload size is too large for

I am currently utilizing nestjs and have encountered an issue where an endpoint only accepts files via multipart. When attempting to upload files that are less than 10MB, everything works perfectly fine. However, when trying to upload files larger than 10M ...

javascriptnode.jsexpressnestjsmulter

Generating Unique Random Numbers with JavaScript

Is there a way to generate 5 unique random lottery numbers using JavaScript? I've been working on the code below, but can't seem to figure out how to ensure there are no duplicate numbers in the final selection. I tried adding conditionals and lo ...

javascriptrandomduplicatesnumbers

Using JSON with PHP to send data and receiving the response back with JavaScript

Despite exploring numerous questions and attempting various methods, I have been unable to find a solution that works. Here is my JavaScript file: function sendData() { var jsondata; var j = {"pub_id":"'+pid+'","a_type":"'+a_t&ap ...

javascriptphpjson

Exploring confidential videos through the VIMEO API

I encountered an issue with the Vimeo API, and navigating through their documentation was quite overwhelming. I am trying to send a request to the api in order to fetch information about private videos. I have a code snippet that works for normal videos: ...

jqueryjsonajaxvimeo-api

PhantomJS: Saving SVG for Future Use

I am attempting to save an SVG file from a sample testpage using PhantomJS. I have successfully navigated to the testpage, but I am unsure of how to locate and save the SVG element. Below is my current approach and where I am encountering difficulties. V ...

javascriptsvgphantomjs

Mixing up jQuery's Deferred, jsDeferred, and the concept of deferring in coding can be a common source of confusion

I recently downloaded a library called jsdeferred in hopes of resolving some code-flow issues I've been facing. However, I'm finding the examples and documentation to be a bit unclear. In my quest for clarity, I also discovered that jQuery offers ...

javascriptjqueryjquery-deferred