Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jason Espin 368 posts 1335 karma points
    Jul 29, 2015 @ 16:04
    Jason Espin
    0

    Storing JSON data in Umbraco

    Hi all,

    I am trying to store the following JSON string in Umbraco:

    [{"Code":2003734,"Date":"31/07/2015","Time":"08:15:00","Extras":[]}]
    

    However, when I view this in the back office, it is coming up with:

    [object Object]
    

    Before I have tried taking out the outer [] before storing the JSON data and then adding it back in when I need to use it however, that only works if there are multiple objects in my JSON. In this case stripping those outer brackets produces the following:

     {"Code":2003734,"Date":"31/07/2015","Time":"08:15:00","Extras":[]}
    

    This again displays as:

    [object Object]
    

    I have tried this where the field is a multi line text field as well as in my own custom property which again is just a text field but read only. In both cases the JSON is not shown to the user in the back in. How do I ensure the JSON appears to my users in the back end without corrupting the JSON that is stored?

    Any help would be greatly appreciated.

  • Anders Bjerner 487 posts 2995 karma points MVP 8x admin c-trib
    Jul 29, 2015 @ 16:41
    Anders Bjerner
    1

    Hi Jason,

    Do you have an example of your view? Is this a property editor, and if so, what should it do?

    Anyways, if you just write something like {{model.value}}, Angular/JavaScript will just call the toString() method of the object.

    If you want to visualize the value, you can write something {{model.value | json}}. This tells AngularJS to serialize the object into a JSON string.

    Not sure whether this answers your question, but if you can post your view (and perhaps controller), I can have another look at it ;)

  • Jason Espin 368 posts 1335 karma points
    Jul 30, 2015 @ 08:36
    Jason Espin
    0

    Hi Anders,

    Here is my controller and editor code below. Nothing special it just outputs a read only field.

    Controller

    angular.module("umbraco")
        .controller("Axum.ReadOnly",
            function ($scope) {
    
            });
    

    View

    <div ng-controller="Axum.ReadOnly">
        <textarea readonly ng-model="model.value" class="umb-editor umb-textarea" rows="10"></textarea>    
    </div>
    
  • Anders Bjerner 487 posts 2995 karma points MVP 8x admin c-trib
    Jul 30, 2015 @ 14:21
    Anders Bjerner
    0

    Given that your controller doesn't do anything, you don't actually need it.

    Since your textarea is readonly (I'm assuming you edit the value somehow programatically), you can just do something like:

    <div>
        <textarea readonly class="umb-editor umb-textarea" rows="10">{{model.value | json}}</textarea>    
    </div>
    
  • Jason Espin 368 posts 1335 karma points
    Jul 30, 2015 @ 16:27
    Jason Espin
    0

    When I do what you have suggested, nothing is displayed.

  • Anders Bjerner 487 posts 2995 karma points MVP 8x admin c-trib
    Jul 30, 2015 @ 16:33
    Anders Bjerner
    0

    Does Umbraco give you any errors - eg. in the developer console? Are you sure the property has a value? I think the default value is just an empty string, so that wouldn't show up in the editor.

    If you add the controller again, you can do something like the code below to write the value to the developer console:

    angular.module("umbraco")
    .controller("Axum.ReadOnly",
        function ($scope) {
            console.log($scope.model.value);
        });
    
  • Jason Espin 368 posts 1335 karma points
    Jul 31, 2015 @ 08:27
    Jason Espin
    0

    Yes the property has a value. No Umbraco does not give any errors. The value is what I pasted above as I have checked in the database and through debugging what my code enters programm

    [{"Code":2003734,"Date":"31/07/2015","Time":"08:15:00","Extras":[]}]
    

    I just want this to be presented to the screen but I think that because it is JSON it is not possible for Angular to display it as it always interprets it as an object.

  • Antonios Fesenmeier 4 posts 75 karma points
    Jan 12, 2016 @ 06:28
    Antonios Fesenmeier
    0

    Hey pals,

    at the moment i have exactly the same problem but need to display the json content at the UI of Umbraco.

    As Document Type we use a simple multiple textbox multiple.

    Any updates on this topics? Some hints?

  • Nicholas Westby 2054 posts 7103 karma points c-trib
    Jan 12, 2016 @ 06:55
    Nicholas Westby
    3

    I've encountered this Umbraco bug and reported it here: http://issues.umbraco.org/issue/U4-7382

    Feel free to vote on it there.

    As a workaround, you could create a property editor that prefixes the text (or, say, base64 encodes it) before storing it to the server. That way, you could avoid having Umbraco detect it as JSON (which is the root of the problem). You really only need to prefix a value, as Umbraco is just looking at the beginning and end of the string to determine if it's JSON.

    I think there is a way to convert that data back to the clean JSON version on the server so the code making use of it is completely unaware that it's a specially encoded string.

    A property value converter might work, but I think there's another concept in Umbraco that manages converting objects before/after storing it to/retrieving it from the database. Can't remember off the top of my head what that is.

    Ideally, the core team would just fix the bug.

  • Michael 125 posts 409 karma points
    Jan 26, 2017 @ 10:07
    Michael
    0

    Hi all,

    I would like to have editable textarea with JSON data.

    How my model can save to DB with this html?

    <textarea class="umb-editor umb-textarea" rows="10">{{model.value | json}}</textarea>
    

    Thanks, Mike

Please Sign in or register to post replies

Write your reply to:

Draft