Error encountered while loading $scope.model.value in a custom Umbraco data type due to malformed JSON structure

I've been encountering some unusual behavior when working with Umbraco and initializing my data types using $scope.model.value.

My custom data type in Umbraco 7.11.1 is based on a complex JSON data model. When I save and publish from the back office, everything seems fine - no error messages or console errors.

However, upon reloading the back office, Umbraco appears to initialize my data type with a partial, malformed JSON string instead of the expected JSON object that was previously saved.

I'm following the standard process for implementing a custom data type through an AngularJS controller:

angular.module('umbraco')
.controller('MyDataType', ['$scope', function ($scope) {

    var loadedData = $scope.model.value;

    // Working with "loadedData"

    $scope.model.value = loadedData;
}])

This issue seems to arise when there is a large amount of data in my JSON model (around 150 characters or more).

Could there be a limit to the data storage capacity for Umbraco data types? Is there something else I might be missing?

javascriptangularjsjsonumbraco7

Answer №1

To address the issue at hand, I resolved to sanitize the JSON data stored in $scope.model.value within my controller.

It seems that Umbraco is quite particular about the additional metadata injected by angularjs into scope variables (such as "$$hashKey"), causing my data type to be initialized with a malformed JSON string instead of the expected JSON object.

In order to tackle this problem effectively, I took the following steps:

  1. Cloned the model value (referred to as $scope.myModel in the code snippet below) used for initializing my data type
  2. Implemented a $watcher to ensure synchronization between $model.scope.value and any modifications made to $scope.myModel
  3. During synchronization, stored a sanitized clone of $scope.myModel (excluding internal angular metadata like "$$hashKey") in $model.scope.value

Here's an example pseudo code showcasing the solution:

angular.module('umbraco')
.controller('MyDataType', ['$scope', function ($scope) {

    $scope.myModel = cloneValue($scope.model.value)

    var endWatcher = $scope.$watch('myModel', function() { 

        $scope.model.value = cloneAndSanitizeMyModel($scope.myModel)
    });

    $scope.$on('$destroy', function() {
        endWatcher();
    });
}])

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

Incrementing and decrementing a variable within the scope in AngularJS

Objective: When the next/previous button is clicked, the label on the current slide should change to display the next/previous category. View the Category Slider Wireframe for reference. Context: I previously tried a solution called 'Obtain Next/Prev ...

javascriptjsonangularjsangularjs-scopeangularjs-controller

Is there a way for me to adjust my for loop so that it showcases my dynamic divs in a bootstrap col-md-6 grid layout?

Currently, the JSON data is appended to a wrapper, but the output shows 10 sections with 10 rows instead of having all divs nested inside one section tag and separated into 5 rows. I can see the dynamically created elements when inspecting the page, but th ...

javascriptjqueryjsonajaxtwitter-bootstrap

How can I apply styling to Angular 2 component selector tags?

As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...

javascriptcssangulartypescriptsass

The route seems to be downloading the page instead of properly rendering it for display

I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...

javascripthtmlexpressroutes

What is the best way to transform the words in my JavaScript array into clickable links?

I am working on a search bar that autofills words and I want to turn those autofilled words into clickable links. For example, if I type "locations" in the search bar, I want it to autofill the word "locations" and turn it into a link that directs me to pa ...

javascripthtmlcss

Exploring Backbone: Unlocking the potential of accessing models in a collection through JSON

Hey there! I'm new to backbone and having trouble finding similar threads to help me with my issue. My problem is quite simple - I am trying to retrieve a JSON file for a collection, and then access those models from my view. While I can successfully ...

jsonbackbone.jscollections

The routing is not functioning properly as anticipated

Here is a route definition that I am using: routes.MapRoute( "FormPreview", "Forhandsgranska/{FormId}/{action}/{id}", new { controller = "FormPreview", action = "Introduction", id = UrlParameter.Optional } ...

javascriptc#jqueryasp.net-mvcasp.net-mvc-routing

Can you offer advice on creating jasmine tests for an Angular controller and service similar to this?

I've been struggling with this issue for hours, mainly because I'm still new to Jasmine and AngularJS. The problem lies within my controller. angular.module('toadlane.controllers', []). controller('MainController', functi ...

javascriptunit-testingangularjsjasmine

Text Overlapping Issue in React Material UI Components

I am currently working on a React application using Material UI and facing an issue while implementing an entity update page. The task at hand is to display the existing values of the entity for the user to update. To achieve this, I have set the default v ...

javascriptreactjsmaterial-ui

Encountered an error in React JS and Axios when attempting to select a form: "Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'."

I'm encountering an issue while attempting to send FormData using Axios within a React JS application. The form should include both text inputs and multiple file uploads. However, when I tried to select the form with querySelector, it doesn't app ...

javascriptnode.jsreactjsaxios

How can I securely access and load JSON data from a different domain?

I need to access JSON data from a different domain. The JSON data format is as follows: [ { "siteName": "JQUERY4U", "domainName": "http://www.jquery4u.com", "description": "#1 jQuery Blog for you ...

jqueryjsoncross-domain

Create a flawless JSON encoding

I found this specific code snippet that retrieves data from a database and converts it into JSON format. It seems to only display one record at a time. Does anyone have any ideas on how to modify it to show multiple records? ...

phpmysqlarraysjson

Update image source dynamically using AJAX and jQuery

Within my app, there exists a web page that contains numerous images with dynamically generated source URLs obtained by sending get requests to the rails server. Initially, these images are assigned a default source. Upon loading the page, another request ...

javascriptjqueryruby-on-railsajax

The API results are able to be displayed in the console, but unfortunately cannot be shown on the user interface. Any efforts to map the results will result in an Un

Can anyone help me troubleshoot an issue with displaying information from a free API on my page? I'm developing a cryptocurrency app using React, and while I can see the array data with console.log(response.data), I encounter an error when I try to se ...

javascriptreactjsaxios

Building a JSON array of search results using Jbuilder in Ruby on Rails

Just stepping into the world of rails and I have a quick inquiry... Currently, my calendar gem fetches event data from JSON in the following way (viewings/index.json.jbuilder) json.array!(@viewings) do |viewing| json.extract! viewing, :id, :room_id, :u ...

rubyjsonruby-on-rails-4jbuilder

The transfer of JSON information from View to Controller yields no value

My goal is to create functionality where users can add and delete JQuery tabs with specific model data, and then save this data to a database. I'm attempting to use an ajax call to send JSON data to the controller, but I am encountering an issue where ...

javascriptajaxasp.net-mvc

Exploring the possibilities of utilizing JavaScript within TypeScript

My dynamic javascript object holds all the resources (translation strings) for my app. Here's how it is structured: var ResourceManager = (function () { function ResourceManager() { var currentLanguage = $('#activeLanguage').htm ...

javascripttypescript

Unable to iterate over an array to compare text values, encountering a non-defined outcome when using Protractor

Currently, I am navigating the waters of protractor and JavaScript as a newcomer. The main challenge I am facing involves comparing a delimited string to an array. My objective is to retrieve a collection of all elements and then iterate through each one, ...

javascriptangularjstestingprotractor

Managing asynchronous tasks that do not save their outcomes within the application state

Upon discovering a requirement within a vanilla JS webapp that necessitates a single JSON "definitions" object for rendering, I realized that the definitions are to be loaded through an HTTP request at the start, then read, parsed, and passed down to anoth ...

javascriptreactjsreduxredux-thunk

Organizing JSON files for SQLContext

I am encountering difficulties with loading JSON data that are dependent on the formatting of the input JSON file. As per the Spark documentation on JSON Datasets, each line in the input file must be a valid JSON Object. The note says: "Note that the fil ...

jsonapache-sparkapache-spark-sql