Accessing the nested arrays within an ng-repeat loop

Can anyone help me figure out what I'm doing incorrectly here?

I've fetched some data and passed it to a controller as 'productInfo'.

While I can successfully load the data, I am encountering issues when trying to target specific values within an ng-repeat loop. It seems like I only get the last set of data in the JSON.

The JSON is coming from the server and I can modify the formatting if needed. I'm just getting started with Angular, so I apologize if the solution is simple.

HTML:

<div ng-controller="ProductStandardCtrl">
  <p>Item:</p>
    <article ng-repeat="item in items"> 
        <img ng-src="{{item.img}}" class="logo" alt="">
        <h4>{{item.title}}</h4>
    </article>
</div>

JSON:

{
"description":"Lorem Ipsum",
"headline":"Promotion headline",
"items":{
    "Standard":
        {"img":"http://placehold.it/303x152",
        "title":"Standard Product 1"
        },
    "Standard":
        {"img":"http://placehold.it/303x152",
        "title":"Standard Product 2"
        },
    "Standard":
        {"img":"http://placehold.it/303x152",
        "title":"Standard Product 3"
        }
    }
}

Thank you!

javascriptjsonangularjsangularjs-ng-repeat

Answer №1

The data property in your JSON is not structured as an array, so it cannot be iterated over.

The correct format should look something like this:

{
    "description":"Lorem Ipsum",
    "headline":"Promotion headline",
    "data":[
        {
            "img":"http://placehold.it/303x152",
            "title":"Standard Product 1"
        },
        {
            "img":"http://placehold.it/303x152",
            "title":"Standard Product 2"
        },
        {
            "img":"http://placehold.it/303x152",
            "title":"Standard Product 3"
        }
    ]
}

Answer №2

When working with the items object, make sure that the keys are unique and do not have duplicate entries:

"items":{
    "Standard":{
        ..
    },
    "Standard":{
        ..
    },
    "Standard":{
        ..
    }
}

To resolve this issue, modify the keys to be distinct like:

"items":{
    "Standard1":{
        ..
    },
    "Standard2":{
        ..
    },
    "Standard3":{
        ..
    }
}

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

Issue with JavaScript code for Google Maps API not functioning as expected

Can someone help me troubleshoot why my simple Google Maps setup isn't working? Thanks! HTML <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&"> </script> <div id="map"> & ...

javascriptjquerygoogle-mapsmaps

The Vue template is not able to recognize the Pug language syntax within the .vue file

According to the Vue documentation: Template processing differs from other webpack loaders, as pug-loader and similar template loaders return a function instead of compiled HTML. Instead of using pug-loader, opting for original pug is recommended. Test ...

javascriptwebpackvue.jsvuejs2

Is it possible to retrieve a specific element from an array using variable references in Meteor's spacebars?

Within a spacebars template, there is a javascript array called x and an index referred to as i, for example: Template.test.helpers({ 'foo': function() { return { x: ['aa','bb','cc'], ...

javascripttemplatesmeteorspacebars

Is the Messenger Bot ignoring random users?

I am facing an issue that I need help explaining. The bot works perfectly when I use it from my own Facebook account. However, when I ask others to use it, the bot does not respond to them, even though I have received a green tick on the pages_messaging a ...

javascriptnode.jsfacebookmessengerfacebook-messenger-bot

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

I am currently working on constructing a graph that illustrates the data for the Amount of Resources utilized Per Project by creating a bar graph. I am aiming to customize the colors of the bars so that each one has its own unique color. Currently, the col ...

javascripthtmlcssd3.jsvisualization

Create and set up a dynamically added Xeditable form field

Is there a way to add a dynamic editable field within the thumbnail section of dropzone.js? I have discovered that Xeditable fields added dynamically need to be initialized. I am attempting to do this in Angular. Check out the Fiddle here: http://jsfiddle ...

javascriptangularjsx-editable

Unable to convert 'Newtonsoft.Json.Linq.JObject' to its designated type

I am having an issue with deserializing a response from my server. Although I can successfully deserialize the response to my ApiResponse object type, I am unable to cast an inner object to its actual type. Below is the code snippet where I extract the re ...

c#jsonlinqdeserialization

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

javascripthtmlangulartwitter-bootstrap

Point the API endpoint to a different file

Is there a method to proxy a specific binary file, such as redirecting a PDF file to another PDF file using something like app.use('/proxy', proxy('/desiredPath'))? I have tried this approach, but it does not seem to work for the parti ...

javascriptnode.jsreactjsapi

Error occurred due to an unexpected end of JSON input following a pending promise

I am currently developing a data handler that requires downloading a file for parsing and processing within the handler. To handle this, I have implemented the file request within a promise and called it asynchronously from other methods. Including the h ...

javascriptnode.jspromise

Modifying the state of one React component using another

Attempting to modify the state of one component using another component in ReactJs, however, being new to React. The parent component contains a state called: _SPCommandBarDisabled this.state = { _SPCommandBarDisabled: true } In a child component ...

javascriptreactjstypescriptwebpackstate

Java: The Art of Juggling JSON Data

After exploring various methods using different JSON libraries, I am struggling to find a convenient solution for converting to and from my JSON file during testing. The structure of the JSON file is as follows: [ { "LonelyParentKey": "Account", ...

javajsonmultidimensional-array

I must first log a variable using console.log, then execute a function on the same line, followed by logging the variable again

Essentially, I have a variable called c1 that is assigned a random hexadecimal value. After printing this to the console, I want to print another hex value without creating a new variable (because I'm feeling lazy). Instead, I intend to achieve this t ...

javascriptstringhex

Setting up button message using ng-repeat command

I am working on a project where I have an ng-repeat that is going through an array of tasks. Each task has a button that, when clicked, reveals options to assign a date and user. My goal is to display the assigned user and date (if applicable) on the butto ...

angularjs

selenium webdriver is having trouble advancing beyond the loading stage of a javascript table

I am in the process of creating a web scraping tool to extract public data from a specific website's table Below is the code I have written for this purpose: options = webdriver.ChromeOptions() options.add_argument('--headless') driver = we ...

javascriptpythonselenium-webdriverweb-scraping

How can I include JavaScript in an HTML document?

My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...

javascriptajaxhtml

Utilizing dynamic JavaScript values in URL parameters before sending

When it comes to online payments, I need to send parameters to a specific URL. The calculations on my website are done in JavaScript, but the online payment company requires PHP parameters like MD5 hashing. To address this, I attempted to create a hidden ...

javascriptphpajax

Ensure that the date is valid using Joi without transforming it into UTC format

Is there a method to validate a date using @joi/date without converting it to UTC? I need to ensure the date is valid before storing it in the database. Here's what I've attempted: const Joi = require('joi').extend(require('@joi/ ...

javascriptnode.jstypescriptjoi

The (ReactJS + Redux) form fails to load when the /new segment is appended to the URL

I'm currently working on a project using React, Redux, and Rails. I've encountered an issue with loading the form. In my App.js file, I have set up a Router that defines the routes. import React, { Component } from 'react'; import { Br ...

javascriptreactjsreact-reduxreact-router

Design an interactive div element that allows users to modify its content, by placing a span

Here is an example of the desired effect: ICON LINE - 1 This is some sample text inside a div element and the next line should begin here ICON LINE - 2 This is some sample text inside a div element a ...

javascripthtmlcss