Gabriel Jaeger Gabriel Jaeger - 3 years ago 183
React JSX Question

issues normalizing data using normalizr react

I am trying to normalize the following data using normalizr. I want to be able to easily extract the location objects. More specifically I am looking to have the movie object nested inside the location object

My code:
After retrieving data from an ajax call (results.data) I want to then flatten it.

const location = await new schema.Entity(
'locations',
{},
{
idAttribute: '_id'
}
);
const movie = await new schema.Entity(
'movies',
{ locations: [location] },
{
idAttribute: '_id'
}
);

const normalizedData1 = normalize(result.data, movie);


The data I am trying to normalize:

[
{
_id: '59c7698d544d56b262e2187e',
title: 'tomorrow never die',
__v: 0,
locations: [
{
address: 'lasselle strasse 12 39114 magdeburg',
lng: '11.6571759',
lat: '52.1229847',
_id: '59c7698d544d56b262e21880'
},
{
address: ' hindhede place 12 587852 singapore',
lng: '103.7760416',
lat: '1.3454118',
_id: '59c7698d544d56b262e2187f'
}
]
},
{
_id: '59c76a87544d56b262e21881',
title: 'today is the day',
__v: 0,
locations: [
{
address: '1 high street flemington 3031',
lng: '144.933632',
lat: '-37.784413',
_id: '59c76a87544d56b262e21883'
},
{
address: ' 18 rue benoit malon',
lng: '2.3515209',
lat: '48.8071822',
_id: '59c76a87544d56b262e21882'
}
]
},
{
_id: '59c76aeca1429ab37e9d40bd',
title: '3 days to go',
__v: 0,
locations: [
{
address: '35 Nasse Wenne Paderborn',
lng: '8.7262077',
lat: '51.73028189999999',
_id: '59c76aeca1429ab37e9d40be'
}
]
},
{
_id: '59c76b6788e12ab3a6d90fea',
title: 'X men',
__v: 0,
locations: [
{
address: '18 rue benoit malon sevres france',
lng: '2.2042506',
lat: '48.817549',
_id: '59c76b6788e12ab3a6d90feb'
}
]
}
];


current output:

{
"entities": {
"movies": {
"undefined": {
"0": {
"_id": "59c7698d544d56b262e2187e",
"title": "tomorrow never die",
"__v": 0,
"locations": [
{
"address": "lasselle strasse 12 39114 magdeburg",
"lng": "11.6571759",
"lat": "52.1229847",
"_id": "59c7698d544d56b262e21880"
},
{
"address": " hindhede place 12 587852 singapore",
"lng": "103.7760416",
"lat": "1.3454118",
"_id": "59c7698d544d56b262e2187f"
}
]
},
"1": {
"_id": "59c76a87544d56b262e21881",
"title": "today is the day",
"__v": 0,
"locations": [
{
"address": "1 high street flemington 3031",
"lng": "144.933632",
"lat": "-37.784413",
"_id": "59c76a87544d56b262e21883"
},
{
"address": " 18 rue benoit malon",
"lng": "2.3515209",
"lat": "48.8071822",
"_id": "59c76a87544d56b262e21882"
}
]
},
"2": {
"_id": "59c76aeca1429ab37e9d40bd",
"title": "3 days to go",
"__v": 0,
"locations": [
{
"address": "35 Nasse Wenne Paderborn",
"lng": "8.7262077",
"lat": "51.73028189999999",
"_id": "59c76aeca1429ab37e9d40be"
}
]
},
"3": {
"_id": "59c76b6788e12ab3a6d90fea",
"title": "X men",
"__v": 0,
"locations": [
{
"address": "18 rue benoit malon sevres france",
"lng": "2.2042506",
"lat": "48.817549",
"_id": "59c76b6788e12ab3a6d90feb"
}
]
}
}
}
}
}

Answer Source

This is what I ended up with

const location = await new schema.Entity(
  'locations',
  {},
  {
    idAttribute: '_id'
  }
);
const movie = await new schema.Entity(
  'movies',
  { locations: [location] },
  {
    idAttribute: '_id'
  }
);

const movieListSchema = [movie];

const normalizedData = normalize(result.data, movieListSchema);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download