如何使用 normalizr 和/或 immutablejs 创建规范化数据结构答案

【问题标题】：How do I use normalizr and/or immutablejs to create normalized data structure如何使用 normalizr 和/或 immutablejs 创建规范化数据结构
【发布时间】：2017-07-27 06:11:55
【问题描述】：

我有一个从客户端 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
}

【问题讨论】：

标签： javascript normalizr

【解决方案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>

【讨论】：

这看起来是最好的方法。 Normalizr 非常适合嵌套数据（您可能在实体中有实体）。给出的数据看起来唯一的问题是您想要的数据恰好比顶层更深。 ImmutableJS 不会为您的要求做任何事情。