Tips on utilizing normalizr to flatten an array with various object types?

Upon receiving a JSON response from the server, it typically looks something like this:

{
  data: [
     { id:  1, type: 'person', emails: [ { id: 1 }, { id: 3 } ], phones: []  },
     { id:  2, type: 'person', emails: [ { id: 2 } ], phones: [ { id: 2 } ]  },
     { id:  3, type: 'person', emails: [ { id: 4 } ], phones: [ { id: 3 }, { id: 3 }]  }
  ],
  included: [
     { id: 1, type: 'emails', ... },
     { id: 2, type: 'emails', ... },
     { id: 3, type: 'emails', ... },
     { id: 4, type: 'emails', ... },
     { id: 1, type: 'phones', ... },
     { id: 2, type: 'phones', ... },
     { id: 3, type: 'phones', ... }
  ]
}

The data property consists of contact objects with similar structures, each having arrays of related emails and phones.

The included property contains all types of related objects, which can share an ID or have different object structures.

The goal is to flatten the response for easier manipulation and achieve a structure like this:

{
    entities: {
        contacts: [ ... ],
        emails: [ ... ],
        phones: [ ... ]
    },
    result: [ 1, 2, 3 ] 
}

Normalizing just the contact data using the provided method does not include emails or phones in the entities.

If unsure if the library supports this specific transformation, reaching out for assistance may be beneficial.

Though the example above doesn't match the actual data, the API follows the schema outlined by jsonapi.org, aligning with its structure.

Answer №1

After some searching, I stumbled upon a specialized library designed for this task inspired by the original normalizr:

https://github.com/stevenpetryk/jsonapi-normalizer

Hopefully, this resource proves useful to someone in the times ahead!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise with the functionality of CSS and JavaScript after successfully deploying a Next.js and React project to the server side

I need to deploy my React+Next and Node.js projects on the same port. To achieve this, I converted my TypeScript files to JavaScript and moved the .next folder to the backend side. Now, my API and frontend code are functioning on the same port thanks to Ex ...

Creating a web form with the ability to select multiple images using Javascript

Currently, I am in the process of developing an HTML form that enables users to select an image, a URL, and text that will be inserted as a <li> into a webpage. However, I am facing an issue where I want users to create multiple <li> per input. ...

The React application is experiencing difficulty selecting CSS files through the code

I've encountered an issue with my React app where the button.css file is not rendering properly even though I've kept both the buttn.css and button.js in the same folder. Button.css .Button { background-color: transparent; border: none; ...

Retrieve and save audio files on firebase

I am currently facing a challenge in my attempt to upload an audio file and then download it later. My approach involves utilizing the Firebase server for this process. There are two specific queries that I find myself stuck on. Resolving either of them w ...

Dealing with jQuery hover/toggle state conflicts in Internet Explorer?

Check out my code snippet: <!doctype html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> label {display:block; w ...

What is the connection between importing and using destructuring in ES6 syntax?

Bring in: import React, { Component } from 'react'; Unpacking: let z, { b } = {a: 1, b: 2, c: 3} Both of these examples seem to have similar syntax. However, in the second example, z will be undefined instead of {a: 1, b: 2, c: 3}. Does this ...

jquery mobile popup message will fade away within a short time interval

In my main page, I have the following code: $(document).bind("pageinit", function () { $.mobile.loading('hide'); }); I am displaying a popup message using the following code: $.mobile.loading('show&apos ...

Is it possible to dynamically call a component in Vue.js using a variable name

Can a Vue.js component be called by using a variable name? The components are registered like this: import Component1 from 'component1' import Component2 from 'component2' import Component3 from 'component3' ... components: ...

I am having trouble setting breakpoints in Google Chrome

For a while, I've been using Google Chrome to debug my JavaScript code without any issues. However, out of nowhere, I am no longer able to place breakpoints. When I click on the line number where I used to add breakpoints, nothing happens. Sometimes, ...

What are some effective strategies for structuring code with AngularJS?

I'm currently working on an app that utilizes ui router to append all HTML data to the following tag: <div class="app" ui-view > However, I want to add a header and footer to my app. My question is, should I include them in the index.html lik ...

The value of an AngularJS model object cannot be altered with a dynamic key

app.controller('indexController', ['$scope', '$location', 'authService', function ($scope, $location, authService) { var vm = this; vm.$onInit = function () { vm.active = { "home": true, ...

Setting up an event listener for a newly added list through the use of node appendChild

I am currently working on dynamically adding a select list to my HTML document. While I have successfully added the node to the DOM, I am struggling with creating an event listener in a separate JavaScript file that recognizes the newly created select list ...

Convert to a TypeScript map

Here are the configurations I am working with: type Choice = { value: any, label: any } Additionally, there is a role interface: export interface UserRole { id: number name: string } I have a set of roles: const userRoles:UserRole[]:[ {id:1,name: ...

Error message: NodeJS express unknown function or method get()

Currently, I am facing an issue while working with express and Pug (Jade) to render a page as the get() function is returning as undefined along with warnings... I followed these steps: npm install express --save npm install pug --save Here's a sn ...

Are there any alternatives to jQuery address in the realm of dojo?

Currently, I am working on developing an ajax application using dojo. I am curious if there is a feature comparable to jQuery Address in terms of functionality. My goal is to implement ajax-based hash url navigation similar to Twitter and Facebook using do ...

When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

In the process of generating presigned URLs for uploading to S3, it is necessary to set the Cache-Control header value to be public, max-age=31536000, immutable. The fetch operation is executed using the following code: fetch( uploadUrl, ...

An effective method for retrieving elements from a one-dimensional array using nested loops

I have a vector containing data that needs to be stored in the following order: cAge[0] = 'Age (1) (1)'; cAge[1] = 'Age (1) (2)'; cAge[2] = 'Age (1) (3)'; cAge[3] = 'Age (2) (1)'; cAge[4] = 'Age (2) (2)&apo ...

When an array is pushed into another array in JavaScript, it reverts back to its original values

My implementation of recursion involves trying different pieces in a matrix: function solve(matrix, pieces) { // Get next -1 let nextEmpty = getNextEmtpy(matrix); if (!nextEmpty) { console.log(matrix) solutions.push(matrix); ...

Adjusting the front size while utilizing the SideNav feature in Materialize

While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues: The first ...

Using React JS to create an interval with an API connection

Is there a way to use setInterval to make an API call once every hour? I would like to set this up in my code. componentDidMount() { fetch(fullURL) .then((response) => response.json()) .then((responseJson) => { // console.log(respons ...