CODEWITHSUNDEEP
javascriptreactjsvue.jsnormalizr
Kirill Monocle
Kirill Monocle

Reputation: 77

Normalizr normalize nested data

I have a nested data which looks like this:

{
  components: [
    guid: "cms-container/c154c79596b3af6326966b0c994e2a934",
    regions: [{
      guid :"r1c154c79596b3af6326966b0c994e2a934",
      components: [{ 
          guid: "cms-markupfile/owg-header.html" },
        { guid: "cms-navmenu/n1503636374400" },
        { guid: "cms-container/c50c451ba72e4b4edab979cf477129215",
          regions: [{
            guid: "r1c50c451ba72e4b4edab979cf477129215",
            components: [{
              guid:"cms-serie/serieDetailRenderer"
            }]
          }]
        },
      ]
    }]
  ]
}

As you can see this is a nested structure with arbitrary nesting. That is, in the components array there can be also an array of region in which, in turn, there can be another components array.

I'm trying to bring this structure to a flat form with normalizr but so far without result. I would be grateful for the help in solving this problem.

Upvotes: 0

Views: 748

Answers (2)

Nikdejan
Nikdejan

Reputation: 41

Old question, but the answer might be useful to someone. If I understand correctly, each component contains unique identifier (guid) and possibly an array of regions, while each region contains unique identifier (guid) and possibly an array of components. If that is the case, you are missing a couple of {} inside the outermost components array. Instead of

 {
    components: [

you should write

{
components: [{

And at the end, instead of

  ]
}

you should write

 }]
}

Now, suppose my understanding of your data is correct, and suppose you make correction as suggested, your normalizr schema should look as folowing:

import { schema, normalize } from 'normalizr'

const regionSchema = new schema.Entity(
    'regions', 
    { components: [ componentSchema ] }, 
    { idAttribute: 'guid' }
)

const componentSchema = new schema.Entity(
    'components', 
    { regions: [ regionSchema ] }, 
    { idAttribute: 'guid' }
)

and you should normalize your data like this

let data = [{
    guid: "cms-container/c154c79596b3af6326966b0c994e2a934",
    regions: [{
      guid :"r1c154c79596b3af6326966b0c994e2a934",
      components: [{ 
          guid: "cms-markupfile/owg-header.html" },
        { guid: "cms-navmenu/n1503636374400" },
        { guid: "cms-container/c50c451ba72e4b4edab979cf477129215",
          regions: [{
            guid: "r1c50c451ba72e4b4edab979cf477129215",
            components: [{
              guid:"cms-serie/serieDetailRenderer"
            }]
          }]
        },
      ]
    }]
  }]

let normalizedData = normalize(data, [componentSchema])

Upvotes: 0

nicolast
nicolast

Reputation: 732

I would try something as simple as that : 

import { schema } from 'normalizr'

const schemas = {
    component: new schema.Entity('components'),
    region: new schema.Entity('regions')
}

schemas.component.define({
    regions: [schemas.region]
})
schemas.region.define({
    components: [schemas.component]
})

I'm afraid of circular references, but it's worth trying. If it's not working can you supply what you've done so far ?

Upvotes: 0

Related Questions