如何使用Ramda js规范对特定结构的Api响应

Question

Suppose we have some nested and unNormalized data coming from Api, how i can simplify the response using Ramda so that it can be used in easy way in fron end apps.

Convert this response

{
  articles: [
    {
      id: 1,
      title: "Dagon",
      tags: [{ id: 1, name: "old ones" }, { id: 2, name: "short story" }]
    },
    {
      id: 2,
      title: "Azathoth",
      tags: [{ id: 1, name: "old ones" }, { id: 3, name: "novel" }]
    },
    {
      id: 3,
      title: "At the Mountains of Madness",
      tags: [{ id: 4, name: "insanity" }, { id: 3, name: "novel" }]
    }
  ]
}

to

{
  articles: {
    byId:{
        1: { title: "Dagon", tags: [1, 2] },
        2: { title: "Azathoth", tags: [1, 3] },
        3: { title: "At the Mountains of Madness", tags: [3, 4] }
    },
    allIds:[1,2,3]
  },
  tags: {
        byId:{
        1: "old ones",
        2: "short story",
        3: "novel",
        4: "insanity"
        },
        allIds:[1,2,3,4]
  }
}

Answer 1

I would probably write it like this:

 const articles = R.pipe( R.prop('articles'), R.applySpec({ allIds: R.pluck('id'), byId: R.pipe( R.groupBy(R.prop('id')), R.map( R.pipe( R.head, R.evolve({ tags: R.pluck('id') }), R.dissoc('id'), ), ), ), }), ); const tags = R.pipe( R.prop('articles'), R.pluck('tags'), R.flatten, R.uniqBy(R.prop('id')), R.applySpec({ allIds: R.pluck('id'), byId: R.pipe( R.groupBy(R.prop('id')), R.map(R.path([0, 'name'])), ), }), ); const normalize = R.applySpec({ tags, articles }); const data = { articles: [ { id: 1, title: "Dagon", tags: [ { id: 1, name: "old ones" }, { id: 2, name: "short story" }, ], }, { id: 2, title: "Azathoth", tags: [ { id: 1, name: "old ones" }, { id: 3, name: "novel" }, ], }, { id: 3, title: "At the Mountains of Madness", tags: [ { id: 4, name: "insanity" }, { id: 3, name: "novel" }, ], }, ], }; console.log('result', normalize(data)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js"></script> 

Answer 2

This is interesting because usually have the opposite problem: I have normalized data from a service that I want to de-normalize on the client. I can see how this can arise, but it's different from my experience.

I would probably write it like this:

 const articles = pipe( prop('articles'), reduce((a, {id, title, tags}) => ({...a, [id]: {title, tags: pluck('id', tags)}}), {}) ) const tags = pipe( prop('articles'), pluck('tags'), flatten, reduce((a, {id, name}) => ({...a, [id]: name}), {}) ) const normalize = (resp, as = articles(resp), ts = tags(resp)) => ({ articles: {byId: as, ids: keys(as)}, tags: {byId: ts, ids: keys(ts)} }) const resp = {articles:[{id:1,title:"Dagon",tags:[{id:1,name:"old ones"},{id:2,name:"short story"}]},{id:2,title:"Azathoth",tags:[{id:1,name:"old ones"},{id:3,name:"novel"}]},{id:3,title:"At the Mountains of Madness",tags:[{id:4,name:"insanity"},{id:3,name:"novel"}]}]}; console.log(normalize(resp)) 

 <script src="https://bundle.run/ramda@0.26.1"></script><script> const {pipe, prop, reduce, pluck, flatten, keys} = ramda </script> 

The reduce step in tags could be replaced by map(values), fromPairs , but that feels like a hack, as it depends on the order of the properties in the tags.

One difference from your requested output is that I keep the tag ids in the original order of the tags for the article. Thus article 3 has tags [4, 3] instead of your [3, 4] . I think this makes more sense, as it's possible that there is some intrinsic ordering to tags, but obviously if you don't like that, you could simply add a sort step.