Saving a revised JSON file using AngularJS

Currently, I am in the process of developing a phonegap application using AngularJS that relies on a .json file to store an array of entries. The main goal I am aiming for is to enable users to mark specific entries as favorites and then utilize that data elsewhere (such as displaying only favorites on another page). This is my first venture into web development, and I must admit that I am quite new to various web technologies like AngularJS, JSON, PhoneGap, etc. However, despite my limited experience, I have decided to forge ahead with this project.

In my attempts to save this data, I have explored options such as IndexedDB, WebSQL DB, and WebStorage but found them to be somewhat complex when integrated with PhoneGap. Therefore, I am now focusing on modifying a field within the .json file and saving the updated file instead.

Although JavaScript cannot directly write files, I experimented with sending the file via POST method as a workaround. Below is the snippet of code for the function I am currently using:

$scope.save = function() {

    $http({
        method: 'POST',
        url: 'data.json',         
        data: $scope.json_data    
    }).success(function(response) {
        addLog("Success message.");
    }).error(function(response){
        addLog("Error message.");
    });
}

I am hesitant to delve into extensive server-side code management since I am unsure if PhoneGap can handle it. I also lack the knowledge of where to commence such an implementation. Perhaps there is a simpler solution, like utilizing transformRequest or some other method to save the json file. Any suggestions on how to proceed? Should I attempt to save the modified .json file through some special code, or would it be more prudent to reconsider my approach entirely?

Your insights and guidance are greatly appreciated!

Answer №1

There are various options available for you to choose from.

  1. One option is to utilize the HTML5 localStorage API, which is considered the simplest approach. This API functions on a key-value basis, where both keys and values are strings. It is highly versatile and can be easily integrated into your app. You can set items either by assigning them as properties of window.localStorage or using getKey/setKey. Furthermore, there exists an abundance of online documentation and tutorials for guidance.
    • Note: When working with Windows Phone 7, it's important to note that dot notation is not supported, so the latter method must be used instead.
  2. Another alternative is to employ the Cordova File API, although it may exhibit some variability across different operating systems compared to localStorage. Nonetheless, this API remains relatively reliable. For further details, refer to this link.
    • Important: Apart from potential cross-operating system disparities, you might also need to install it as a plugin using the following command:
      cordova plugin add org.apache.cordova.file
      .

Check out these helpful links:

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

Guide on converting the <br> tag within a string to an HTML tag in VUE.js

When working with Vue.js, I often use {{}} to display my data on the HTML page. However, I recently encountered a situation where my data includes a string with tags that I would like to be rendered as actual HTML tags when displayed. data(){ return ...

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

My current project involves developing a website feature that allows users to download a PDF version of a page. To achieve this, the generated HTML is rendered into a PDF on the server, which is then returned as a Base64-encoded PDF. This data is converted ...

Can the AngularJS icon adapt to different lists?

I'm currently developing in AngularJS / Jade and I need to implement functionality where an icon changes when a user clicks on something. The code I have right now looks like this: a(onclick='return false', href='#general', data-t ...

constructing a nested container using XMLHttpRequest

I am working on creating a nested div-container structure using AJAX and adding the text "Hello World" to the inner container. The outer container serves as a holder for the inner container in this case. Below is the code I have written: index.html: ...

"Automatically insert a new row into the table if the cell loses focus and is not left

Can someone assist me with adding a table row dynamically when a cell is filled and the input focus is lost? My JavaScript skills are not strong. Here is a link to the form: JSFIDDLE <table class="table table-timesheet" ng-controller="TimesheetCtrl"> ...

JSON RPC uses numeric values as property names in its responses

After receiving a JSON string (a part of a large one) from an oracle server, I encountered the issue of not being able to deserialize it. "rows":[ { "1":"0000000001", "2":"SPARE00002", "5":"151.3354", "13":"100", ...

Finding the text within a textarea using jQuery

My journey with jQuery has just begun, and following a few tutorials has made me feel somewhat proficient in using it. I had this cool idea to create a 'console' on my webpage where users can press the ` key (similar to FPS games) to send Ajax re ...

Is today within the current week? Utilizing Moment JS for time tracking

There is a problem that I am facing. Can you assist me in determining whether the day falls within the current week? I am currently developing a weather forecast service and need to validate if a given day is within the current week. The only clue I have ...

Make sure to keep Vue-Cookies intact even when closing the browser or tab

I have integrated vue-cookies into my Vue application. The code I'm using to store a cookie is as follows: $cookies.set('authUser', authUserObj); The object authUserObj contains the access_token. However, when I close and reopen the ta ...

Remove rows that have values within a specific range

I'm facing an issue in Google Sheets where I'm attempting to delete entire rows on the "Data" sheet if any value in column B matches values from the range D3:E20 in the "Backend" sheet. The code provided works when a word is hardcoded as the cond ...

Troubleshooting Key Press Issues with Bootstrap 5 Dropdown and Collapse Feature

Exploration In my quest to create a dynamic Bootstrap (5) Navigation bar/menu with animated sub-menus, I stumbled upon a solution that seems to fit the bill perfectly. By employing data-bs-toggle="collapse" instead of 'dropdown', I dis ...

JavaScript tabs function malfunctioning upon page load

I attempted to implement tabs on my website using this example: http://www.w3schools.com/howto/howto_js_tabs.asp Although everything is functioning correctly, the default tab isn't opening as expected. The tab opens, but the header color does not get ...

Encountering a "window not defined" error while implementing Leaflet in my Nuxt JS application

I'm encountering an issue while trying to generate my nuxt app, specifically on my 'Area' page. It seems like the error is related to the leaflet maps being used on this page. Initially, I attempted to resolve this problem by enclosing my a ...

The JSON.stringify() method does not update the object that has been modified by an event

Below is the code snippet: //function triggered when columns are reordered dataTable.on('column-reorder', function (e, settings, details) { var userData = tableWidget.grid('userData'); console.log(userData); //userData object s ...

The interaction issue in Ionic 4 with Vue js arises when the ion-content within the ion-menu does not respond to clicks

My Vue app has been set up with Ionic 4 using @ionic/vue. Below is the code snippet from the main.js file: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store&apos ...

The Ng-include tag does not provide highlighting for its text

Within an ng-include template, I have a div that is not highlighting when hovered over. Although the cursor changes to a pointer when hovering over the text, attempting to click and drag to highlight it results in nothing happening. This issue is signific ...

Using Javascript to dynamically add an element to an array with a unique index

Given let inputArray = []; $('some_selector').each(function() { let outer, inner; outer=$(this).parent().attr('some_property'); inner=$(this).attr('a_property'); if (!inputArray[outer]) inputArray[outer] = ...

Steps to properly structure Rails JSON data with a line break

I'm currently working on a Rails application using Kendo UI. I am in the process of creating a JSON object to populate a table cell within a table. I'm attempting to add line breaks within the cell by including them in the JSON object, but it doe ...

Showing a section of a DIV inside an iframe

I have implemented an HTML object in the following way: <object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object> However, I do not want to display the entire content of mypage.aspx within the HTML object/iframe. In ...

Develop a fresh behavior on-the-fly

Here is the HTML code snippet: <div class="bold knowmore login" id="j-6"> <span>...</span> </div> and this jQuery script: $(function(){ $(".login").on("click", function(){ console.log('login clicked!'); $(" ...