標準化されたデータ構造を作成するためにnormalizrおよび/またはimmutablejを使用する方法

Question

クライアントAPIからデータが返されています。 私は彼らにそれを変更させる能力がありません。彼らはそれを明確にしました。

{ 
"feed": { 
    "name": "name", 
    "media:destination": "http...", 
    "channel": { 
     "pagecomponent": { 
      "component": [{ 
       "item": { 
        "link": "http...", 
        "description": "description", 
        "title": "title", 
        "category": "tag 2", 
        "pubDate": "2002-01-01T20:00:00.000Z", 
        "media:content": { 
         "medium": "image", 
         "url": "http..." 
        } 
       } 
      }, { 
       "item": { 
        "link": "", 
        "info:pagecomponent": { 
         "id": "1237", 
         "content": "na" 
        }, 
        "description": "description", 
        "title": "title", 
        "category": "tag 1", 
        "pubDate": "2007-01-21T20:00:00.000Z", 
        "media:content": { 
         "media:restriction": [{ 
          "relationship": "allow", 
          "type": "country", 
          "content": "us ca" 
         }, { 
          "relationship": "allow", 
          "type": "url", 
          "content": "?" 
         }], 
         "media:description": "title", 
         "media:thumbnail": { 
          "width": "", 
          "url": "http...", 
          "height": "" 
         }, 
         "media:title": "title", 
         "medium": "video", 
         "type": "application/x-mpegURL", 
         "url": "http..." 
        } 
       } 
      }] 
     } 
    } 
} 

ほとんどの最初の数層はほとんど変更されず、UIには影響しません。私はnormalizrを使用していくつかのバリエーションを試しましたが、何もリモートでは動作しません。私にとって重要なデータは「コンポーネント」レベルにあります。最終的に、私は気に唯一のデータは、「コンポーネント」キーから「アイテム」の配列である：

item: { 
    id: null, 
    link: null, 
    description: null, 
    title: null, 
    pubDate: null, 
    category: null, 
    thumbnailWidth: null, 
    thumbnailUrl: null, 
    thumbnailHeight: null, 
    medium: null, 
    contentTypeHeader: null, 
    videoUrl: null, 
    "media:content": mediaInfo, 
    "media:restriction": restrictions 
} 

Answer 1

それはほとんどnormalizrのようなライブラリは、この場合に必要であるように思えるん。

JSON.parseを使用してJSON文字列をオブジェクトに変換し、component配列になるまで階層をナビゲートし、各要素をitemプロパティにマップします。

// for demo purposes; I expect you already have this variable 
 
var json = document.getElementById('json').value 
 

 
var data = JSON.parse(json.trim()) 
 

 
var items = data.feed.channel.pagecomponent.component.map(function (e) { return e.item }) 
 

 
console.log(items)

.as-console-wrapper { min-height: 100vh; }

<pre id="json" style="display:none"> 
 
{ 
 
"feed": { 
 
    "name": "name", 
 
    "media:destination": "http...", 
 
    "channel": { 
 
     "pagecomponent": { 
 
      "component": [{ 
 
       "item": { 
 
        "link": "http...", 
 
        "description": "description", 
 
        "title": "title", 
 
        "category": "tag 2", 
 
        "pubDate": "2002-01-01T20:00:00.000Z", 
 
        "media:content": { 
 
         "medium": "image", 
 
         "url": "http..." 
 
        } 
 
       } 
 
      }, { 
 
       "item": { 
 
        "link": "", 
 
        "info:pagecomponent": { 
 
         "id": "1237", 
 
         "content": "na" 
 
        }, 
 
        "description": "description", 
 
        "title": "title", 
 
        "category": "tag 1", 
 
        "pubDate": "2007-01-21T20:00:00.000Z", 
 
        "media:content": { 
 
         "media:restriction": [{ 
 
          "relationship": "allow", 
 
          "type": "country", 
 
          "content": "us ca" 
 
         }, { 
 
          "relationship": "allow", 
 
          "type": "url", 
 
          "content": "?" 
 
         }], 
 
         "media:description": "title", 
 
         "media:thumbnail": { 
 
          "width": "", 
 
          "url": "http...", 
 
          "height": "" 
 
         }, 
 
         "media:title": "title", 
 
         "medium": "video", 
 
         "type": "application/x-mpegURL", 
 
         "url": "http..." 
 
        } 
 
       } 
 
      }] 
 
     } 
 
    } 
 
} 
 
} 
 
</pre>