1

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

1 回答 1

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>

于 2017-03-07T06:33:14.983 回答