What is the best way to retrieve information from an external JSON file using Ionic?

I'm currently working on developing an app using the Ionic Framework.

My goal is to retrieve data from an external JSON file by providing a token and parameter (1 for premium or 2 for basic).

The URL displays the data correctly, but I am struggling to understand how to fetch the data in my "pageCtrl".

I attempted following this guide

Unfortunately, when running the app, I only see 3 blocks without any actual data.

This is the code snippet I have in my controller.js:

// Controller for docs.
appControllers.controller('docsCtrl', function ($scope, $mdBottomSheet, $mdToast, $mdDialog, $http) {

    $http.get('https://www.domain.com/api/document?__token=[the_token_added_on_code]&__idPortal=1').
    success(function(data, status, headers, config) {
        $scope.docs = data;
    }).
    error(function(data, status, headers, config) {
    // log error
    });

}); // End of docs controller.

Here's the HTML code:

<ion-view view-title="Documentos">

    <!--dashboard section-->
    <ion-content id="docs-content">

        <div class="documentos padding">

            <ion-list>
                <ion-item ng-repeat="doc in docs" class="item-avatar">
                    <h2>{{doc.name}}</h2>
                    <p>{{doc.description}}</p>
                    <p>{{doc.created}}</p>
                </ion-item>
            </ion-list>
        </div>

    </ion-content><!--end dashboard section-->
</ion-view>

The URL returns the following data:

{"success":true,"return":{"totalItem":"33","totalPages":7,"pageSize":5,"itens":[{"id_document":"4760","name":"Teste","created":"02\/09\/2015 16:57:00","id_type":"108","type":"Documento Teste","description":"Documento"},{"id_document":"4722","name":"Ata de assembleia 08\/2015","created":"31\/08\/2015 17:32:55","id_type":"3","type":"Ata da assembl\u00e9ia","description":null},{"id_document":"4400","name":"Regimento","created":"04\/08\/2015 16:47:30","id_type":"108","type":"Documento Teste","description":"Regimento interno "},{"id_document":"4261","name":"ATA da AGE em 18\/09","created":"26\/07\/2015 22:22:39","id_type":"3","type":"Ata da assembl\u00e9ia","description":null},{"id_document":"2964","name":"Novo regimento playground","created":"05\/05\/2015 14:30:17","id_type":"91","type":"Regimento Interno","description":"Segue novo regimento playground"}]}}

Thank you in advance for your assistance.

Answer №1

To access the data correctly, you need to retrieve the items from the attribute itens.

$scope.items = data.itens;

Make sure to log your data using console.log(data) to identify the properties within the object and navigate to it like this:

{status: true, return: { .. itens:[] }}

$scope.items = data.return.itens

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

Tips for displaying an object's properties using ngfor?

<div *ngFor="let article of articleList; let i = index"> <div class="item"> <div class="image-holder" style="background-image: url(https://uniqueblog.com/images/ninja-1.jpg)"&g ...

Updating the dropdown title to reflect the chosen dropdown value

I'm currently learning react and attempting to grasp the concept through tutorials. However, I am facing challenges in changing the title of a dropdown list based on the selected value. I am using react bootstrap for this task, but struggling to imple ...

Generate an HTML dropdown menu based on the item selected from the autocomplete input field

I have a PHP page that searches the database and returns JSON results to an autocomplete input field: https://i.sstatic.net/PPFgR.png When I display the response from the PHP file (as shown above), it looks like this: { "success": true, "results ...

Creating a jQuery-powered dynamic select field in Rails 3

After implementing the dynamic select functionality from this example on GitHub (GitHub Link), I successfully integrated dynamic selection for car models in my form for adding a new car. The form now filters car models based on the selected car name, and i ...

Elements are randomly glitching out with CSS transitions in Firefox

Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...

Creating a mixin with various JSON creators for a type hierarchy in Jackson - a comprehensive guide

I'm looking to deserialize hamcrest matchers using Jackson. To achieve this, I've created a mixin as shown below: @JsonTypeInfo(use = JsonTypeInfo.Id.NAME, include = JsonTypeInfo.As.PROPERTY, property = "_type") @JsonSubTypes({ @Type(va ...

Exploring the functionalities of HTML5 mode in Angular and the HAL browser

I am in the process of implementing html5 mode within an AngularJS application. I need to configure the server to redirect all requests without a suffix (meaning without an extension, not static resources) to the base URL: @RequestMapping(value = "/{path: ...

Invoking the callback function within the containing scope in Typescript

I am facing an issue with my Angular component where I have a class that includes common services and functions. While passing some functions as callbacks, the scope is getting lost during execution. Let me demonstrate the problem through the code below: @ ...

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

SwitchBase is undergoing a transformation where its unchecked state goes from uncontrolled to controlled. It is important to note that elements should not transition back and forth between un

There is a MUI checkbox I am using: <Checkbox checked={rowValues[row.id]} onChange={() => { const temp = { ...rowValues, [row.id]: !rowValues[row.id] }; setRowValues(temp); }} in ...

Unable to process URL containing a JSON value in a Java Spring API

I'm trying to use JAVA APIs to execute some of my project URLs, but I'm facing issues with URLs containing JSON values. The API doesn't seem to accept the JSON input I provide. Oddly enough, when I try the same URL in a browser, it works fin ...

Utilizing JavaScript-set cookie in PHP: A comprehensive guide

I am currently facing a situation where I am setting a cookie using a JavaScript script on my page, but I need to access this value while generating HTML on the server-side using PHP. Let me explain the scenario. When a user requests a page, PHP star ...

Synchronizing Vuetify Carousel with dynamic route parameters

I'm facing an issue where the v-carousel value does not sync correctly with a route parameter using a computed property. Despite waiting for the mounted hook, the carousel seems to emit its own input and disregard the initial value from the route para ...

Converting PHP arrays into JSON group arrays

List of singers and their songs can be displayed by clicking on the singer. Below is the PHP code snippet to achieve this: <?php $server = "localhost"; $username = "user"; $password = "123456"; $database = "database"; $con = mysql_c ...

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...

Discovering the final step of a for loop when working with JavaScript objects

Currently, my data consists of: {12: Object, 13: Object, 14: Object} I need help figuring out how to detect the final iteration in the for loop below: for (var i in objs){ console.log(objs[i]); } Does anyone have any solutions? ...

When attempting to add event listeners in a forEach loop in Javascript, only the last entry seems to

I need help with a function that iterates through an Array and adds <h3> elements to a div. The function then attaches an event listener (an onclick) to the current <h3> element, but for some reason, only the last element processed by the fun ...

Steps to create a clickable image input

How can I make an image clickable in an input with type=file? <label for="formFileSm" class="label_display form-label">avatar</label> <input class="width_input mx-auto form-control form-control-sm" id="fo ...

Generate a JSON representation of a class within a Spring application

I'm a beginner with Spring and I'm looking to modify the JSON response of my class. public class Mapping { public String name; public Object value; } I want the current format: {"name" : 'value of field name', "value&q ...

Enhance Your Images with Fancybox 2.1.5 by Adding Titles Directly to the Photo Window

I need help figuring out how to place the title text inside the photo box on this particular page: Despite my efforts and multiple Google searches, I have not been successful in achieving this. As a newcomer to javascript, I am struggling with implementin ...