JSON形式のデータをJavaScript で加工したい

Question

PHPのjson_encodeでエンコードしてファイル保存した
JSON形式の下記のようなデータがあるのですが、

{"access_type":"(101)","this":15,"one":76,"two":59,"three":26},
{"access_type":"(102)","this":7,"one":44,"two":6,"three":0}

これを下記のような縦と横を入れ替えた感じのJSONデータに加工したいと考えています。

[["","(101)","(102)"],["this",15,7],["one",76,44],["two",59,6],["three",26,0]]

理由は、グラフ化するために加工後の形式でないと
希望のグラフにならないからです。

JavaScriptで加工できるはずと、いろいろ知らべて、
現在は、JavaScriptの書籍と格闘中です。

何か、方法があれば教えてください。

2016/1/27追記
以前、JSONデータの加工を質問させて頂きましたが、新たに、次のようなデータが存在してることが分かりました。
【加工前】
{"house_name":"abc","house_name_sub":"def,"prefectures_name":"東京","this":0,"one":0,"two":2,"three":0},
{"house_name":"ghi","house_name_sub":"","prefectures_name":"大阪","this":0,"one":0,"two":2,"three":1}

これを同様に次のように、name_subは（※サブネームは存在しないときがあります。）nameにくっつけ、prefecture_nameの行は削除して加工したいと思っています。
spliceなど、個々の要素の削除等はあったのですが、2次元配列での、行の編集がよく分かりませんでした。
何か方法ありますでしょうか？
【加工後】
[["","abc def","ghi"],["this",0,0],["one",0,0],["two",2,2],["three",0,1]]

Answer 1

JSON.parse()を使って、オブジェクトにして、それをfor文やforEachなどで並び変えればいけると思いますよ

Comments

[Satochan24]

回答有難うございます。
ただいま、JSON.parse()を調査中です。
一度、これ使えないかなぁと思ったのですが、オブジェクトにする理由が分からず
保留にしていました。
ファイルに保存したJSONデータは一度、変数に入れ直せばいいわけですね。

[S_Minecraft]

オブジェクト(phpでは連想配列って言った方がわかりやすいかもです)にしない限りはただの文字列なので一旦変換してから再度JSON.stringify()で文字列に戻すとしないと、文字列自体を操作するということをしなければいけないので…
下の方がthisがまずそうと仰っていますが、キーとして使う場合は文字列なので問題はないです

[S_Minecraft]

(var o={};
o.this; //これではアクセスできない
o["this"]; //これならアクセスできる
//こういうことです)

[Satochan24]

なるほど。ありがとうございます。
何か、JSON.parse()を使って、JSO形式を変換してるサンプルコードのサイトとかありませんでしょうか？
基本、サンプルコードがないとなかなか書けないもので…

[S_Minecraft]

サンプルコードといってもただ
var object = JSON.parse(input);
/* 変形処理 */
var output = JSON.stringify(object2); //object2は変形したobject
これだけですよ

[Satochan24]

そうですよね～。
問題は、オブジェクトに対する並び替えの処理ですよね。
分かりました。もう少しJavaScriptの筋力を鍛えて考えてみます。
方向性が絞れただけでも助かりました！
有難うございます。

Answer 2

たとえば、prefectures_name というキーは出力しないよ、とか、house_name というキーは house_name_sub とくっつけて、かつ、キーの名前は出力しないよ、とか、これからもいろいろと特殊なケースが出てくるのかな、と思って、その特殊ルールをテーブルとして持つような実装を考えてみました。converter.extra がそのテーブルです。

  var converter = {
    keys: [],
    key2index: {},
    chunks: [],
    extra: { // 特殊な動きをするキーのルールを書く
      house_name: { key: "", func: function(key) { return this.house_name + this.house_name_sub; } },
      house_name_sub: false, // 出力しないキーは false にしとく
      prefectures_name: false // これも出力しない 
    },
    set: function(str, list) {
      JSON.parse(jsonStr).forEach(function(obj, i) {
        for (var key in obj) {
          converter.add(i, key, obj[key]);
        }
      });
      return this;
    },
    add: function(index, key, value) {
      if (typeof this.key2index[key] == 'undefined') {
        this.key2index[key] = this.keys.length;
        this.keys.push(key);
      }
      this.chunks[index] = this.chunks[index] || { 
        add: function(key, value) { this[key] = value; },
        get: function(key) { return this[key]; }
      };
      this.chunks[index].add(key, value);
    },
    getList: function(orgKey, outKey, func) {
      var a = [ outKey ];
      if (func) {
        this.chunks.forEach(function(chunk) { a.push(func.bind(chunk)()); });
      } else {
        this.chunks.forEach(function(chunk) { a.push(chunk.get(orgKey)); });
      }
      return a;
    },
    getResult: function() {
      return (function(conv, a) {
        conv.keys.forEach(function(key) {
          var extra = conv.extra[key];
          if (extra === false) {
            // ignore
          } else if (typeof extra == 'undefined') {
            a.push(conv.getList(key, key));
          } else {
            a.push(conv.getList(key, extra.key, extra.func));
          }
        });
        return a;
      })(this, []);
    }
  };
  var jsonStr = '[{"house_name":"abc","house_name_sub":"def","prefectures_name":"東京","this":0,"one":0,"two":2,"three":0},{"house_name":"ghi","house_name_sub":"","prefectures_name":"大阪","this":0,"one":0,"two":2,"three":1}]';
  var result = converter.set(jsonStr).getResult();

途中で飽きてきちゃったのでやっつけコードになっていますが、あしからず。
初心者には難解な変態コードも含まれていますが、まあこんな書き方もあるよな、ということで。

Comments

[Satochan24]

回答有難うございます。
上記コード、まだ試せていませんが、試してみたらまたコメントします！
現在の状況としては、そもそものSQLを必要なデータだけ持ってくる形にし、
表示させている表とは別のSQLからJSONデータを作ることにしました。
そして、name_subとかは、concatを使って、ひとつの名前にくっつけて出力
させたら、従来のJavaScriptの変換方法で処理可能となりました。
この方法でのデータ作成が完了次第、上記コードを試してみようと思います。

[Satochan24]

回答有難うございました。
確認したら、出来ていました！有難うございます。
現状として、
別SQLで処理させようとしたら、なぜか結果が違ってしまい、
やはり同じSQLから、出力を調整してみようと考えて、上記コードを参考に
したいと思っています。
上記コードはJSONデータを直接、コードに記述していますが、JSONファイルから読み込む形でも可能でしょうか？

現在のコードで、JSONファイルを読み込んでいる部分は、下記のような記述になっています。

$(function(){
$.ajax({
url:'house_array.json',
dataType:'json',
}).done(function(data_j){
console.log("success");

var keys = Object.keys(data_j[0]);

for (var i = 0; i < data_j.length; i++) {
for (var j = 0; j < keys.length; j++) {
var key = keys[j];

if (typeof result5[j] == 'undefined') {
result5[j] = [ key == 'house_full_name' ? 'Month' : key ];
}
result5[j].push(data_j[i][key]);
}
}

[Satochan24]

JavaScriptで加工もできると思いますが、今回は以下のようにJSONファイルを経由せず、直接に変数を参照させて、力技でデータを作成しました。
['<?php print "今月"; ?>',<?php print $var_1[this]; ?>,<?php print $var_2[this]; ?>],
['<?php print "1ヶ月前"; ?>',<?php print $var_1[one]; ?>,<?php print $var_2[one]; ?>],
['<?php print "2ヶ月前"; ?>',<?php print $var_1[two]; ?>,<?php print $var_2[two]; ?>],
['<?php print "3ヶ月前"; ?>',<?php print $var_1[three]; ?>,<?php print $var_2[three]; ?>],
['<?php print "4ヶ月前"; ?>',<?php print $var_1[four]; ?>,<?php print $var_2[four]; ?>],

Answer 3

これでいかがでしょうか。

var jsonString = '[{"access_type":"(101)","this":15,"one":76,"two":59,"three":26}, {"access_type":"(102)","this":7,"one":44,"two":6,"three":0}]';
var list = JSON.parse(jsonString);
var keys = Object.keys(list[0]);

var result = [];

for (var i = 0; i < list.length; i++) {
    for (var j = 0; j < keys.length; j++) {
        var key = keys[j];
        if (typeof result[j] == 'undefined') {
            result[j] = [ key == 'access_type' ? '' : key ];
        }
        result[j].push(list[i][key]);
    }
}

var json = JSON.stringify(result);

Comments

[Satochan24]

出来てます！
出力してみたら、キチンと出来てました！
すみません。有難うございます。
上記のコード、なかなかテクニカルで、完全に解読できないのですが、
JavaScriptの勉強続けて、解読したいと思います。
ありがとうございました！

Answer 4

"this" キーが悪さしそうです。
"this" こうやってアクセスする分には問題になりそうもないですけど、this は、javascript では予約語です。可能であれば、this1 とか名前変更した方が良さそうです。

Comments

[Satochan24]

回答ありがとうございます。
「this」は、「this1」に修正してみます。

[Satochan24]

あれっ！？ひょっとすると、”year”とかもまずいですか！？

[think49]

"year" は Keywords にないので問題ありません。
http://www.ecma-international.org/ecma-262/6.0/#sec-keywords

[Satochan24]

回答有難うございます。
キーワードのリンクも参考になりました。