How to save JSON data locally (on the machine)?

Question

I am using the following link to create a tree like structure: LINK

This is my code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tree Context Menu - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Tree Context Menu and Drag Drop Tree Nodes</h2>
    <p>Right click on a node to display context menu.</p>
    <p>Press mouse down and drag a node to another position.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="padding:5px">
        <ul id="tt" class="easyui-tree" data-options="
                url: 'tree_data1.json',
                method: 'get',
                animate: true,
                dnd:true,
                onContextMenu: function(e,node){
                    e.preventDefault();
                    $(this).tree('select',node.target);
                    $('#mm').menu('show',{
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            ">
        </ul>
    </div>
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" onclick="save()" data-options="iconCls:'icon-save'">Save</a>
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
        <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
        <div class="menu-sep"></div>
        <div onclick="expand()">Expand</div>
        <div onclick="collapse()">Collapse</div>
    </div>
    <script type="text/javascript">
        function append(){
            var t = $('#tt');
            var node = t.tree('getSelected');
            t.tree('append', {
                parent: (node?node.target:null),
                data: [{
                    text: 'new item1'
                },{
                    text: 'new item2'
                }]
            });
        }
        function removeit(){
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('remove', node.target);
        }
        function collapse(){
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('collapse',node.target);
        }
        function expand(){
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('expand',node.target);
        }
    function save(){
            var a = document.createElement('a');
        a.setAttribute('href','data:text/plain;charset=utf-u,'+encodeURIComponent(JSON.stringify({$('#tt').html()}));
        a.setAttribute('download', "data.json");

        }
    </script>
</body>
</html>

When I am running this, nothing is getting saved.

I have added a save button to this structure's code.

I want that whenever the user clicks this save button then he could store this tree structure produced as JSON data on his/her local machine. I want this as this tree is editable. How can I do this?

I used the following link for the same:

link

I want that whatever changes that happens to the id = "tt" could be retrieved in the form of JSON and store on my local machine.

Do you want the user to save an actual JSON file or do you just want it stored in the browser for you to get at later? — Bill Criswell
– Bill Criswell, Commented Feb 11, 2015 at 21:30
What Dustin posted below would work for most browsers besides IE. If you need IE support you're have to go server side. Google "content disposition". Not sure what you're using server wise but it's all the same idea: stackoverflow.com/questions/1465573/… — Bill Criswell
– Bill Criswell, Commented Feb 11, 2015 at 22:03

Dustin Poissant · Accepted Answer · 2020-02-04 20:07:34Z

19

Sure this can be done.

Once you have your JSON string (Im assuming you know how to get it because if not that's a different question altogether) you can save it using this function:

function saveText(text, filename){
  var a = document.createElement('a');
  a.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(text));
  a.setAttribute('download', filename);
  a.click()
}

Call it:

var obj = {a: "Hello", b: "World"};
saveText( JSON.stringify(obj), "filename.json" );

This would prompt the use to save a file named "filename.json", which contains a JSON object of obj

edited Feb 4, 2020 at 20:07

answered Feb 11, 2015 at 21:14

Dustin Poissant

3,5162 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bill Criswell Over a year ago

Download attribute does not work in Internet Explorer.

POOJA GUPTA Over a year ago

@DustinPoissant: I changed the code according to your answer but nothing is working .. please see my code in the post once.

Dustin Poissant Over a year ago

Thanks because you took the inner HTML of the tree element and tried to call JSON.stringify on it. that doesn't give you a json string it probably just gives you an error.

Dustin Poissant Over a year ago

If you want to know how to get the JSON data back out of the tree of that plugin then that is a completely different question than how to save a json string as a file (which i thought is what was asked)... the answer to the other question can probably be found here jeasyui.com/forum/index.php?topic=421.0 (i didn't read it all, but you can)

EvgenyKolyakov Over a year ago

shouldn't it be charset=utf-8 ?

|

n6g7 · Accepted Answer · 2015-02-11 21:09:27Z

5

LocalStorage does exactly that.

Use it like this :

localStorage.setItem('myCat', 'Tom');
console.log(localStorage.getItem('myCat')); // Tom

Use can use it to store stringify-ed objects as well :

var obj = { a : 1, b : 2};
localStorage.setItem('myObj', JSON.stringify(obj));
var obj2 = JSON.parse(localStorage.getItem('myObj'));

answered Feb 11, 2015 at 21:09

n6g7

4085 silver badges13 bronze badges

2 Comments

Dustin Poissant Over a year ago

They are not asking for it to be stored by the Clients localStorage but they want the use to actually save the file.

n6g7 Over a year ago

Oh I see, I didn't understand it that way.

Collectives™ on Stack Overflow

How to save JSON data locally (on the machine)?

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related