정규화 된 데이터 구조를 생성하는 데 normalizr 및/또는 immutablejs를 사용하는 방법

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>