Download a JSON file from an angularjs client device

I'm in the process of adding offline functionality to a Cordova app I'm developing. I have a PHP file that retrieves a list of images as JSON, which I then save on the client device using the FILESYSTEM API. However, when I try to display the images using AngularJS, the images don't show up even though the containers are visible. Do I need to parse the data in order for the images to display, or is there something else I'm missing?

{ $http({
        method: 'POST', // I've also tried using the GET method
        url: 'cdvfile://localhost/persistent/local_store/json1.json'
    }).success(function(data){
        $scope.clientData = data;
    });
}

Here's how I'm attempting to display the images:

{<img class="image_dir" ng-src="cdvfile://localhost/persistent/local_store/{{image.image_dir}}">
}

Thank you in advance for any help!

javascriptandroidjsonangularjscordova

Answer №1

It appears that the data retrieved from the success function is being stored in the clientdata scope. However, in the ng-src for the image, clientscope is not being referenced at all. Without knowing the structure of your JSON object, one potential solution might be:

{<img class="image_dir" ng-src="cdvfile://localhost/persistent/local_store/{{clientscope.image.image_dir}}">
}

It would be helpful to console.log(clientscope); to understand its contents.

It's unclear where this code snippet is located since it seems to be within an object. If it is part of the JSON, then the snippet is not in the correct JSON format, which could be another possible solution.

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

Discovering the changing states through ui-sref

This is the ng-repeat code for my Main Menu. It consists of different meal categories like breakfast, lunch, etc. I am trying to dynamically retrieve states for these categories. Below is the HTML code: <li class="mega-menu" ng-repeat="gethead in deta ...

angularjsangular-ui-router

Upgrading the entire document's content using jQuery

I am dealing with an ajax response that provides the complete HTML structure of a webpage, as shown below: <!DOCTYPE> <html> <head> <!-- head content --> </head> <body> <!-- body content --> </b ...

javascriptjqueryajax

Adding a Library to Your Project

Being a newcomer to importing libraries into personal projects, I am attempting to import the mathjs library package for the first time. (). However, I am running into the issue on my website where it says "math is undefined" when I try to use it. You c ...

javascriptnpmmathjs

transform python string into json with proper structure

I am working on a code snippet that establishes parent-child relationships within a list of lists. Levels=[['L1','L1','L2'], ['L1','L1','L3'], ['L1','L2'], ...

pythonjsonpython-3.x

Are you in need of a BISON middleware solution for socket.io encoding and decoding?

Is there a method to manipulate the data transmitted by socket.io just before it is sent or received? I was considering implementing something like an express middleware. This way, I could encode the data after the normal .emit() call and before the socket ...

javascriptnode.jssocket.iomiddleware

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

javascriptjqueryhtmlcssajax

What is the process for creating and registering custom Handlebars functions?

Despite spending plenty of time searching, I am still unable to find detailed information on where exactly to place my custom handlebars helpers. Should they be added in a <script> tag within my webpage's .hbs file? Or should I include them in a ...

javascriptnode.jsexpresshandlebars.js

Ideal selection for creating an authentic real-time audio application on android

As I consider choosing a stack of programming languages and frameworks for my android app development, I find myself well-versed in popular web frameworks like React, Redux, Angular, JavaScript, Java Android, and C/C++. My main concern lies in real-time f ...

androidangularjsreactjsandroid-ndknative

What is the best method to activate a button only when the appropriate radio buttons have been chosen?

Just dipping my toes into the world of javascript. I've created a form with a set of "Yes/No" radio buttons, and I attempted to create a function that will disable the "Submit Form" button if any of the following conditions are met: If one or more r ...

javascripthtmlformsbuttonradio-button

"Mastering the Art of Placing the VuetifyJS Popover: A Comprehensive

When using VueJS with VuetifyJS material design components, how can I adjust the positioning of the Vuetify popover component to appear below the MORE button? The current placement is in the upper left corner which I believe defaults to x=0, y=0. Button: ...

javascriptvue.jsvuetify.js

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

I'm new to using the <Fab /> element and I'm struggling to figure out how to implement a hover effect that will change the button's color. Here's what I have so far: JavaScript: <Fab variant="extended" className=&quo ...

javascriptcssmaterial-ui

How can you efficiently pass multiple JSON files as arguments for Observable Arrays, especially when the values from one file are required for use in another file?

My goal is to utilize $.getJSON to retrieve data from two JSON files and assign their values to observableArrays. Currently, I have hard-coded the JSON data into the observableArray. You can view an example on this JSFiddle link. This was my initial appro ...

javascriptjqueryjsonknockout.jsknockout-2.0

Nodejs: The JSON.stringify method is automatically rounding the numbers

I am encountering a strange issue. When I call the credit card processor (CCBILL) with a payment token, they return a subscription ID. For example, 0124058201000005323 should be returned but what I receive is 124058201000005330, indicating that it has been ...

javascriptnode.jsexpress

Get access to documents through angular

I'm currently working on a file server project. The backend is built with Node.js and MongoDB GridFS is used for file storage. Files are retrieved from the server using gridfs-stream. For the front-end, Angular is being utilized. However, I have encou ...

javascriptangularjsnode.js

Obtaining a worldwide JavaScript variable through AJAX JSON query

Hello, I have encountered an issue while using this code for my AJAX JSON request. When attempting to make jsonObj a global variable and then console.log() it, the debugger console shows that it is always coming up as undefined. To explain my question fur ...

javascripthtmljsonajax

When making an AJAX request and sending a JSON object, the server is returning an undefined

My current setup involves using an XMLHttpRequest in the following manner: xml.send(JSON.stringify({ingredients: this.state.ingredients})); This is used to transmit an object (this.state.ingredients) to the server. The payload appears correct when checke ...

javascriptjsonnode.jsajax

How to Use Nested Rows with ng-repeat in Angular?

The code below generates the image displayed: <div class="row" ng-show="result"> <div class="col-sm-12"> <table class="table"> <thead> <tr> ...

angularjshtml-table

I am in search of a specialized 3D camera with a unique effect

I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...

javascripthtmlwebgl

Utilizing ng-repeat $index for locating an element within an array

Within my $scope, there is a property called $scope.cars, which is an array of cars. Users have the ability to delete a car from this array. When calling the delete function deleteThis, I pass the $index parameter created by ng-repeat. However, in the Ja ...

javascriptarraysangularjsangularjs-ng-repeat

What could be the reason why the AngularJS form is set to read-only

Explaining the setup of my app in HTML: <div ng-app="md-app"> <div id="general"> <ng-include src="template1" ng-controller="GeneralCtrl"></ng-include> </div> </div> The JavaScript function to fetch a pe ...

javascriptangularjs