Utilizing ng-repeat in AngularJS to retrieve API data

I am new to AngularJS and I want to utilize ng-repeat to display my records in td elements under the record section.

{"Root":[{"Record":["documents.php","OSHA_lockout_regulation.pdf","LOTO_Matrix_2016.docx","LOTO_Log_2016.pdf","Sample_LOTO_policy.pdf","iLockitOut_Help.pdf","Employee_Training.pdf"]}]}

Can someone please explain how I can use ng-repeat for displaying these records?

    <tr ng-repeat="(key, list) in documentdetails">
    <td>
        <a class="link" target="_blank" href="../admin/views/documents/{{list.Record[1]}}">{{ list }}</a>
    </td>
    </tr>

I would appreciate any suggestions or advice.

Answer №1

To loop through the items, you can use this syntax:

ng-repeat="(key, list) in documents.Root[0].Record"
. If there are multiple instances of Root, nested loops can be used to iterate over all of them.

For instance, consider this example where {{doc}} is directly utilized to form the URL.

angular.module("myApp", [])
  .controller("ctrl", function($scope) {
    $scope.documents = {
      "Root": [{
        "Record": [
          "documents.php",
          "OSHA_lockout_regulation.pdf",
          "LOTO_Matrix_2016.docx",
          "LOTO_Log_2016.pdf",
          "Sample_LOTO_policy.pdf",
          "iLockitOut_Help.pdf",
          "Employee_Training.pdf"
        ]
      }]
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="ctrl">
  <table>
    <tr ng-repeat="(key, doc) in documents.Root[0].Record">
      <td>
        <a class="link" target="_blank" href="../admin/views/documents/{{doc}}">{{ doc }}</a>
      </td>
    </tr>
  </table>
</body>

Answer №2

Check out this link for a working fiddle

 <tr ng-repeat="(key, document) in documentdetails.Root[0].Record">
  <td>
    <a class="link" target="_blank" href="../admin/views/documents/{{document}}">
    {{ document }}
    </a>
  </td>
</tr>

Here is the code snippet from the controller:

$scope.documentdetails = {  
  "Root":[  
  {  
     "Record":[  
        "documents.php",
        "OSHA_lockout_regulation.pdf",
        "LOTO_Matrix_2016.docx",
        "LOTO_Log_2016.pdf",
        "Sample_LOTO_policy.pdf",
        "iLockitOut_Help.pdf",
        "Employee_Training.pdf"
      ]
    }
  ]
};

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

Leveraging depends alongside max for jQuery validation

Trying to implement a conditional max value on a field using jQuery validation, but encountering issues. Even though I've utilized the depends function, it seems like the validate function is not functioning as expected. The code block appears correc ...

Encountering difficulties in deploying the React application on Github Pages

I've run into an issue while trying to deploy a basic react application. It was successful the first time, but after updating my code on GitHub and attempting to execute 'npm run deploy', it failed https://i.sstatic.net/JlEvm.png Here is m ...

The hyperlink tag within the overlay div is unresponsive

I'm facing an issue with my overlay div (rb-overlay) that pops up when users click on a page option. The overlay takes up the entire page and includes a close button in the top right corner. However, I've noticed that the link at the end of the t ...

An overview on adding a new element to an array of objects in AngularJS

I have a feature on my website where users can create via points. Each user starts with one point, and if they want to add more, they can click "add" to insert a new object in the array with an empty value. The user then has the option to input a new value ...

What is the established procedure for resetting all elements within an (X)HTML document?

Is there a way to reset elements without using a form like how it can be done with JavaScript? document.forms[0].reset(); I am utilizing AJAX, so do I need to loop through all the elements using JavaScript? ...

Exploring the search feature in an AngularJs platform

Can anyone offer guidance on adding a search bar to my AngularJs website that can search the contents within it? ...

Removing Remote Debugging from an Ionic App after it has been released on the Play Store is not possible

Recently, I developed a hybrid application using Ionic and successfully uploaded the publishing version to the Play Store. However, upon inspecting the app after downloading it from the Play Store, I noticed that all of the code is visible in Chrome insp ...

After making a request with HttpClient, the response can either be an empty body or a body

Encountering issues with HttpClient while trying to post data, I am faced with two distinct errors: When booking is treated as an object, the error message reads: Backend returned code 400, body was: [object Object]. Converting booking to JSON format by ...

The TinyMCE editor's input box lost focus while on a popup dialog

Whenever I attempt to access the TinyMCE editor in a dialog box popup and click on "Insert link", the "Insert link" dialog box pops up but I can't type anything into the text field. I suspect that the issue may stem from having a dialog box open with ...

Obtain the jQuery dialog's closure event within the $.Ajax completion function

I have developed a custom jQuery plugin that utilizes jQuery Dialog to showcase messages. Specifically, I am using it within my jQuery $.ajax -->done function. My goal is to capture the close event of the Dialog in the .ajax function so that I can redir ...

Angular: Struggling with Parent Component not recognizing changes in Child Component

Currently, I am facing an issue with my shopping cart functionality. When the website first loads and a user does not have a saved shopping cart, they need to click "add to cart" before one is created. The problem lies in the fact that my app.component doe ...

Issues arise when attempting to run JQuery functions with the $ symbol in the head tag of HTML

Because of the limitations imposed by Squarespace, I am only able to include code via the Head tag. When the script reaches the $ part of JQuery, it seems to not execute at all. After testing with numerous console.log() statements, I observed that the webp ...

Enhance the JQuery dropdown by padding with zeros at the beginning for smooth incrementing

I have been attempting to customize a date dropdown in Sharepoint because the default minutes dropdown only allows selection in 5-minute intervals. Initially, I was able to make it work with the code below: $("select[id$='DateTimeFieldDateMinutes&apo ...

The animation speed of the jQuery hashchange event is set to zero, causing the animation

I'm facing an issue with jQuery where my animation inside a hashchange event is not smooth; it happens instantly when triggered. I'm looking for a way to make the animation smoother. jQuery( document ).ready(function() { jQuery(window).on(&a ...

What is the method to permanently install and enforce the latest version using npm?

We are implementing a private npm module for exclusive use within our organization. Given that the module is managed internally, we have confidence in version updates and changes. Is there a way to seamlessly install this module across multiple projects s ...

There seems to be a runtime error in the Javascript code, as an

When attempting an AJAX call to a controller from my view, I encountered a JavaScript runtime error: function expected. Here is the script in question: <script type="text/javascript> var jsonData = []; var ms1 = $('#ms ...

Updating ViewModel and refreshing the view following an AJAX request

I need assistance in creating a table where each row has a child row serving as a details section. This details section should display a log history and allow users to input new logs. Upon adding a new log by clicking the "Add" button, the log history shou ...

Showing an array in angular.js

When sending data to a PHP file, the file processes it and performs an SQL search, returning a list of names in a for each statement. For example: Ryan, Jack, Billy, Sarah. However, when echoing the response in Angular, all the names are joined together l ...

When the virtual keyboard is opened on the Nexus Player using an Android Cordova app, the first character is automatically typed

While my question may be specific to a particular device, I am seeking insights on how to prevent a common issue from occurring in general. My ReactJS app has a build for Android using Cordova, with one of the supported devices being the Nexus Player. The ...

Ways to attach JQuery UI Sortable widget to html content fetched through Ajax requests?

Here's a straightforward question for you. Take a look at my JavaScript/jQuery code snippet below: $('body .combo-table').sortable({ handle: '.grabber', opacity: 0.9, axis: 'y', start: function (e, ui) { ...