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属性。

＆＃13;

// 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)

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: