Download json object as json file using jQuery

Question

I am looking for ways to download a stringfied json object as file..

I do have one solution as presented in this fiddle example:

My working version looks like this

HTML

    From data attribute of span:
    <span id="a-data"></span>
    <span id="obj-data" data-obj2='{"obj-1": "text-1","obj-2": "text-2","obj-3": "text-3"}'></span>

JavaScript

    var obj = $("#obj-data").data("obj2");
    var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
    $('<a href="data:' + data + '" download="data.json">Download Me</a>').appendTo("#a-data");

I'd prefer if I could use this HTML. could you suggest a way to approach that?

From data attribute of self:
<div id="data" data-obj='{"obj-1": "text-1","obj-2": "text-2","obj-3": "text-3"}'>
    Download Me
</div>

guest271314 · Accepted Answer · 2015-10-22 01:45:30Z

16

Try substituting "application/json" for "text/json" , calling .click() on DOM element a , removing a at click handler

$("#data").click(function() {
  $("<a />", {
    "download": "data.json",
    "href" : "data:application/json," + encodeURIComponent(JSON.stringify($(this).data().obj))
  }).appendTo("body")
  .click(function() {
     $(this).remove()
  })[0].click()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="data" data-obj='{"obj-1": "some text","obj-2": "text-2","obj-3": "text-3"}'>
    Download Me
</div>

jsfiddle http://jsfiddle.net/kda2rdLy/

edited Oct 22, 2015 at 1:45

answered Oct 22, 2015 at 0:51

guest271314

1

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

6 Comments

GRowing Over a year ago

for some reason this seems to remove spaces in json string when the data file is opened

GRowing Over a year ago

This object {"key":"some text"} ends up like this {"key":"sometext"} in this example .. "some text" is not supposed to merge into "sometext"

guest271314 Over a year ago

@GRowing See updated post. Wrapped $(this).data().obj in encodeURIComponent() jsfiddle jsfiddle.net/kda2rdLy

GRowing Over a year ago

ahh,, yes,, you're right. thanks for borrowing your eyes to me :)

guest271314 Over a year ago

Had encodeURIComponenet() in js at OP ; neglected to included that portion, here , at original post above

|

Collectives™ on Stack Overflow

Download json object as json file using jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related