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, Feb 11 '15 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: http://stackoverflow.com/questions/1465573/forcing-to-download-a-file-using-php — Bill Criswell, Feb 11 '15 at 22:03

Dustin Poissant · Answer 1 · 2020-02-04T20:07:34.387

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 04 '20 at 20:07

answered Feb 11 '15 at 21:14

Dustin Poissant

3,201
1
20
32

Download attribute does not work in Internet Explorer. – Bill Criswell Feb 11 '15 at 21:29
@DustinPoissant: I changed the code according to your answer but nothing is working .. please see my code in the post once. – POOJA GUPTA Feb 11 '15 at 21:40
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 Feb 11 '15 at 21:44
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 http://www.jeasyui.com/forum/index.php?topic=421.0 (i didn't read it all, but you can) – Dustin Poissant Feb 11 '15 at 21:47
FYI: I found that the Anchor Tag needed to be part of the DOM, otherwise `a.click()` wouldn't fire. So I added... `document.body.appendChild(a); a.setAttribute("style", "display: none;");` before the `a.click();` then `a.remove();` directly after it. – Campbeln May 30 '17 at 18:11
@Campbeln What browser are you using? I have tested this on all major up-to-date browser and it works without appending it to the DOM. – Dustin Poissant Jun 01 '17 at 17:34
1

shouldn't it be `charset=utf-8` ? – EvgenyKolyakov Aug 17 '18 at 15:26

score 5 · Answer 2 · answered Feb 11 '15 at 21:09

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 '15 at 21:09

n6g7

408
5
13

2

They are not asking for it to be stored by the Clients localStorage but they want the use to actually save the file. – Dustin Poissant Feb 11 '15 at 21:15
3

Oh I see, I didn't understand it that way. – n6g7 Feb 11 '15 at 21:22

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

2 Answers2

Linked

Related