What is the best way to iterate through array elements with AngularJS?

I am looking to showcase array values using the ng-repeat directive, and then call the getimage function with itemid and photoidlist in order to retrieve the image URL.

The JSON data that I have is as follows: 

$scope.productslist = {
  "json": {
    "response": {
      "servicetype": "10",
      "functiontype": "104",
      "statuscode": "0",
      "statusmessage": "Success",
      "data": [
        {
          "itemid": 247,
          "isproduct": true,
          "disable": false,
          "itemcost": 150,
          "itemdescription": "prdct",
          "itemname": "pro1",
          "itemno": "#1Pro",
          "itemcategoryid": 158,
          "itemcategory": "General",
          "addedby": "buzi by pree"
        },
        {
          "itemid": 257,
          "isproduct": true,
          "disable": false,
          "itemcost": 150,
          "itemdescription": "products",
          "itemname": "pro 2",
          "itemno": "pro 2",
          "itemcategoryid": 158,
          "itemcategory": "General",
          "photoidlist": [
            138
          ],
          "addedby": "buzi by pree"
        },
        {
          "itemid": 259,
          "isproduct": true,
          "disable": false,
          "itemcost": 150,
          "itemdescription": "descc",
          "itemname": "pro 1",
          "itemno": "pro 3",
          "itemcategoryid": 158,
          "itemcategory": "General",
          "photoidlist": [
            139, 140
          ],
          "addedby": "buzi by pree"
        },
        {
          "itemid": 262,
          "isproduct": true,
          "disable": false,
          "itemcost": 599,
          "itemdescription": "fgg",
          "itemname": "ff",
          "itemno": "r",
          "itemcategoryid": 158,
          "itemcategory": "General",
          "addedby": "buzi by pree"
        },
        {
          "itemid": 263,
          "isproduct": true,
          "disable": false,
          "itemcost": 56,
          "itemdescription": "ffr",
          "itemname": "rf",
          "itemno": "fe",
          "itemcategoryid": 158,
          "itemcategory": "General",
          "photoidlist": [
            140, 143, 141
          ],
          "addedby": "buzi by pree"
        }
      ]
    }
  }
};

Currently, my task is to loop through this array using the ng-repeat directive and display all the values along with their specific details.

You can check out the Fiddle that I have created for this purpose.

javascriptangularjsarraysjsonangularjs-ng-repeat

Answer №1

While your reasoning is sound, you are attempting to loop through an object rather than an array. The correct syntax should be as follows:

<tr ng-repeat="item in productslist.json.response.data">
     ...
</tr>

Check out the modified Fiddle 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

``In Python 3.3, develop a unique custom binary JSON parser that is compatible with the UBJsonReader in

In my current project, I am utilizing Blender to export custom properties and data to Libgdx. My goal is to utilize JSON in both text and binary formats. While I am familiar with using the JSON module, I am unsure how to export a binary JSON file that is c ...

javac++pythonjsonbinary

Vue js: Automatically assign alternate text to images that are not found

Currently, I am in the process of developing a website that features a variety of products, each with its own unique image. For binding the image URL to the source attribute, I use the following code snippet: <img :src="product.ImageUrl"/> In case ...

javascriptvue.jsvuejs2

What is the correct way to define a function parameter when using AngularJS Emit?

I've been exploring the emit feature in AngularJS and had a question about passing a function as an argument. In the Parent Controller: $scope.$on("getChildFunction", function(event, func) { console.log("The function is...", func); }) In the Ch ...

javascriptangularjs

Displaying and hiding the Angular <object> element

I am faced with a challenge involving managing files of various formats and creating a gallery with preview functionality. Everything works smoothly when clicking through items of the same format, like JPEGs. However, an issue arises when switching from vi ...

javascriptjqueryangularjsswfobject

How to invoke a function from a different ng-app in AngularJS

I have 2 ng-app block on the same page. One is for listing items and the other one is for inserting them. I am trying to call the listing function after I finish inserting, but so far I haven't been successful in doing so. I have researched how to cal ...

javascriptangularjsangularjs-directiveangularjs-scope

Trigger an AJAX request by clicking a button using PHP

I've seen this question asked multiple times, but none of the answers seem to relate to my specific situation. I have a button that when clicked, should call a JavaScript function, passing it a PHP variable. The AJAX will then send that variable to a ...

javascriptphpmysqlajaxpost

Accessing a JSON file in JavaScript

My website has a script that populates dropdown menus and is currently running from a custom.js file. While it works well, there is one aspect of it that I am not entirely satisfied with. The script involves embedding the various levels of menu, which am ...

javascriptjqueryjsonajax

What is preventing the listener from activating?

I came across some HTML code that looks like this: <form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post"> <input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения"> ...

javascriptjqueryevent-handling

Ways to stop a ng-click event on a child div controller from activating an ng-click in the parent controller?

http://plnkr.co/edit/gB7MtVOOHH0FBJYa6P8t?p=preview The example above demonstrates a parent-child controller setup. In the child controller, when a button is clicked, it displays the div showPop and emits an event to the $rootScope. Upon receiving this e ...

javascriptangularjsangularjs-scopeangularjs-ng-click

finding the index of a particular checkbox in a list

I am working with a list of checkboxes that are dynamically created using JavaScript, each contained within its own separate div element. I need to determine the position number of a specific checkbox within all checkboxes sharing the same class within a p ...

javascriptjquerycheckbox

Having issues with Mysql JSON_EXTRACT when using double quotes in the path

I have defined the following table structure: `CREATE TABLE `TestInfo` ( `Info` json DEFAULT NULL ) ; ` I am inserting two rows with JSON values. INSERT INTO `TestInfo` (`Info`) VALUES ('{ "statusCode": 200, "result": { "summary": { ...

mysqljson

How can you dynamically load a Data-URI scheme image in Angular?

Upon a certain event called foo, my server sends back an image that is base64-encoded which I need to display on the client. Currently, I have it set up in the following way: index.html ... <img src="{{data}}"></img> ... controller.js ... $ ...

angularjsdata-uri

How to eliminate all special characters from a text in Angular

Suppose I receive a string containing special characters that needs to be transformed using filter/pipe, with the additional requirement of capitalizing the first letter of each word. For instance, transforming "@!₪ test stri&!ng₪" into "Test Stri ...

javascriptangulartypescriptpipe

Understanding the Behavior of Vue 3's setInterval Methods

Environment I am working on a Vue 3 Application where I need to run a constant setInterval() in the background (Game Loop). To achieve this, I have placed the code in store/index.js and invoked it from views/Playground.vue's mounted() lifecycle hook ...

javascriptvue.jsvuejs3

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

As I develop a service in Angular to display components inside a modal, I have encountered an issue. After injecting the component content into the modal and adding it to the page's HTML, the functionality within the component seems to be affected. F ...

javascriptangulartypescript

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

Authentication Error (401) in WordPress JWT

Recently, I came across WordPress and started using it. However, I encountered some issues while trying to integrate JWT with a custom endpoint. Despite configuring my API and JWT correctly, I faced an authentication problem during my AJAX request. It&ap ...

javascriptphpjquerywordpressjwt

Troubleshooting Jqgrid Keyboard Navigation Problem

Here is a link to the jsfiddle code snippet. Upon adding jQuery("#grid").jqGrid('sortableRows'); into my JavaScript code, I encountered an issue where keyboard navigation no longer worked after sorting rows Below is the JavaScript code snippet: ...

javascriptjqueryjquery-uijqgrid

Make a cURL request to replace the 'sect' parameter with the section sign in the URL, using JSON

Having a small issue with my code: <?php $url = "http://xxxx/duplicate"; $data = array ( userId => xxxx, // authentication userId loginToken => 'xxxx', // authentication loginTo ...

phpjsoncurl

Providing a public API that exclusively grants access to requests originating from my own website

After hours of scouring Google and SO, I have yet to find someone facing the same challenge I am encountering now. Here's the situation: We have invested a significant amount of money and effort into maintaining a database. The data from this databas ...

javascriptnode.jsrestsecurityreactjs