如何使用normalizr和/或immutablejs來創建規範化的數據結構

我有一個從客戶端API返回的不規則的數據塊。 我沒有能力讓他們改變它，他們已經明確表示。如何使用normalizr和/或immutablejs來創建規範化的數據結構

{ 
"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..." 
        } 
       } 
      }] 
     } 
    } 
}

大多數頭幾層不會改變，對用戶界面沒有任何影響。我嘗試了使用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 
}

來源

2017-03-07 dgrant069

它幾乎看起來像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>

來源

2017-03-07 06:33:14 gyre

這看起來像第一個方法的最佳辦法。 Normalizr非常適合嵌套數據（實體中可能有實體）。給出的數據看起來像唯一的問題是你想要的數據恰好比頂層更深。 ImmutableJS不會爲你所要求的做任何事情。 –

如何使用normalizr和/或immutablejs來創建規範化的數據結構

回答

相關問題