2016-09-17 8 views
4

私は、次のようなJSON文字列を持っている:Javascriptでjsonオブジェクトをフィルタリングする方法は?

{ 
    "Alarm":{ 
     "Hello":48, 
     "World":3, 
     "Orange":1 
    }, 
    "Rapid":{ 
     "Total":746084, 
     "Fake":20970, 
     "Cancel":9985, 
     "Word": 2343 
    }, 
    "Flow":{ 
     "Support":746084, 
     "About":0, 
     "Learn":0 
    } 
} 

その後、私は上記の文字列をロードし、jsonオブジェクトに変換:

jsonStr = '{"Alarm":{"Hello":48,"World":3,"Orange":1},"Rapid":{"Total":746084,"Fake":20970,"Cancel":9985},"Flow":{"Support":746084,"About":0,"Learn":0}}'; 
var jsonObj = JSON.parse(jsonStr); 

今どのように私はキーの名前で、このjsonオブジェクトをフィルタリングすることができますか?例えばフィルターは「アンジュ」だった場合、フィルタオブジェクトは、次のようになります。

{ 
    "Alarm":{ 
     "Orange":1 
    } 
} 

フィルタは「FLO」であった場合は、フィルタリング対象になるでしょう:

{ 
    "Flow":{ 
     "Support":746084, 
     "About":0, 
     "Learn":0 
    } 
} 

とフィルターは「WOR」だった場合、その結果は次のようになります。

{ 
    "Alarm":{ 
     "World":3, 
    }, 
    "Rapid":{ 
     "Word": 2343 
    } 
} 

はそれがfilterメソッドを使用して、このフィルタリングを実現することは可能ですか?アドバイスをいただければ幸いです。

+1

[フィルタリングJSONデータ]の可能な重複(http://stackoverflow.com/questions/9483695/filtering-json-data) – Endless

+0

"JSONオブジェクト" のようなものはありません - JSONは**常に**文字列です。これ以上何もない。 – naomik

+0

@naomik JSON.parse(jsonStr)は文字列を返しますか? – Meysam

答えて

6

あなたはindexOf()とキー名をチェックして、望ましい結果を返しますreduce()Object.keys()を使用して関数を作成することができます。与えられたソリューションの横に

var obj = { 
 
    "Alarm": { 
 
    "Hello": 48, 
 
    "World": 3, 
 
    "Orange": 1 
 
    }, 
 
    "Rapid": { 
 
    "Total": 746084, 
 
    "Fake": 20970, 
 
    "Cancel": 9985, 
 
    "Word": 2343 
 
    }, 
 
    "Flow": { 
 
    "Support": 746084, 
 
    "About": 0, 
 
    "Learn": 0 
 
    } 
 
} 
 

 
function filterBy(val) { 
 
    var result = Object.keys(obj).reduce(function(r, e) { 
 
    if (e.toLowerCase().indexOf(val) != -1) { 
 
     r[e] = obj[e]; 
 
    } else { 
 
     Object.keys(obj[e]).forEach(function(k) { 
 
     if (k.toLowerCase().indexOf(val) != -1) { 
 
      var object = {} 
 
      object[k] = obj[e][k]; 
 
      r[e] = object; 
 
     } 
 
     }) 
 
    } 
 
    return r; 
 
    }, {}) 
 
    return result; 
 
} 
 

 
console.log(filterBy('ange')) 
 
console.log(filterBy('flo')) 
 
console.log(filterBy('wor'))

+0

こんにちは、あなたのコードにバグがあります。私は修正できませんでした。あなたはそれを見てみることができますか? https://jsfiddle.net/1tmwkkza/2/サンプルコードで 'is'を検索すると' IsHello'だけが返され、 'IsWorld'は無視されます。 – Meysam

+0

これで試してみました。固定https:// jsfiddleだと思います。net/1tmwkkza/6/ –

+0

固定、ありがとうございました:) – Meysam

2

filterの方法では、私はArray#filterの機能を意味すると思います。これはオブジェクトに対しては機能しません。とにかく、あなたの入力データのためのソリューションは、次のようになります。

function filterObjects(objects, filter) { 
    filter = filter.toLowerCase(); 
    var filtered = {}; 
    var keys = Object.keys(objects); 
    for (var i = 0; i < keys.length; i++) { 
     var key = keys[i]; 
     if (objects.hasOwnProperty(key) === true) { 
      var object = objects[key]; 
      var objectAsString = JSON.stringify(object).toLowerCase(); 
      if (key.toLowerCase().indexOf(filter) > -1 || objectAsString.indexOf(filter) > -1) { 
       filtered[key] = object; 
      } 
     } 
    } 
    return filtered; 
} 
+1

'if(objects.hasOwnProperty(key)=== true)'で '=== true'をスキップすることができます。 –

11

、あなたは鍵を確認するために、再帰的なスタイルを使用することができます。

この提案は、より多くのネストされたオブジェクトを内部に持ち、フィルタリングされた部分だけを得る機会を与えます。

function filterBy(val) { 
 
    function iter(o, r) { 
 
     return Object.keys(o).reduce(function (b, k) { 
 
      var temp = {}; 
 
      if (k.toLowerCase().indexOf(val.toLowerCase()) !== -1) { 
 
       r[k] = o[k]; 
 
       return true; 
 
      } 
 
      if (o[k] !== null && typeof o[k] === 'object' && iter(o[k], temp)) { 
 
       r[k] = temp; 
 
       return true; 
 
      } 
 
      return b; 
 
     }, false); 
 
    } 
 

 
    var result = {}; 
 
    iter(obj, result); 
 
    return result; 
 
} 
 

 
var obj = { Alarm: { Hello: 48, "World": 3, Orange: 1 }, Rapid: { Total: 746084, Fake: 20970, Cancel: 9985, Word: 2343 }, Flow: { Support: 746084, About: 0, Learn: 0 }, test: { test1: { test2: { world: 42 } } } }; 
 

 
console.log(filterBy('ange')); 
 
console.log(filterBy('flo')); 
 
console.log(filterBy('wor'));
.as-console-wrapper { max-height: 100% !important; top: 0; }

+1

柔軟性の高い素晴らしいソリューション、ありがとうございます! – Meysam

関連する問題