読者です 読者をやめる 読者になる 読者になる

1.21 jigowatts

Great Scott!

JSON Formatter

JSON文字列を読みやすくするやつ。

Target

Result


概要

JSONの整形がしたくて調べてみたらWebサービスがいろいろ引っかかって、もう少し調べてみたらJSON.stringify関数で読みやすくしてくれるってことで作ってみました。
最初はJSFiddleで書いたんだけど、はてなブログでもJavaScriptが書けるってことを今更ですが知りました\(^o^)/

実装

といってもJSON.stringify関数のUIを提供しているだけですががが。

$(function() {
  $('textarea').css("width","500px").css("height","6em");
  $('#btnClear').click(function() {
    $('#target').val('');
    $('#result').val('');
  });
  $('#target').each(function() {
    $(this).bind("keyup", execute(this));
  });
});

function execute(elm) {
  return function() {
    var str = $('#target').val();
    try {
      var jsonBefore = JSON.parse(str);
      var json = JSON.stringify(jsonBefore, null, "    ")
      $('#result').val(json);
    } catch (e) {
      console.log(e);
      $('#result').val('SyntaxError-->\(^o^)/');
    }
  }
}
JSFiddle

https://jsfiddle.net/sh_yoshida/67r78mLj/