Best Practice when converting data in JavaScript

Question

I'm currently working with a payload that is string and im parsing is using JSON.parse(payload). My question is, once I convert the payload I need to access at least 5 properties within the newly created JSON object and it is quite nested. My current implementation is:

 ....then(payload => {
   return ({
       obj1: JSON.parse(payload).field.obj1
       obj2: JSON.parse(payload).field.obj2
       obj3: JSON.parse(payload).field.obj3
       obj4: JSON.parse(payload).field.obj4
       obj5: JSON.parse(payload).field.obj5
     });    
   })

I feel like this is to much repetition and feel this way would work better in terms of readability (even then it is not that clean):

   ....then(payload => {
       let jsonObj = JSON.parse(payload)
       return ({
           obj1: jsonObj.field.obj1
           obj2: jsonObj.field.obj2
           obj3: jsonObj.field.obj3
           obj4: jsonObj.field.obj4
           obj5: jsonObj.field.obj5
         });    
       })

Can anyone suggest the best way to execute this in terms of readability and performance?

NOTE: This is used within a promise.all() so the above will iterate over X promises.

For a start, you should only need to parse the JSON once, then you need to think in terms of populating a model client-side. Start with what you wished you had, then either send that back from the server, or map from the response to what you wished you had. — DJDaveMark, Feb 04 '18 at 11:33
Your second approach it's OK, you don't need to do any further stuff. — Ele, Feb 04 '18 at 11:38
I guess then this becomes a duplicate of [One-liner to take some properties from object in ES6](https://stackoverflow.com/q/25553910/1048572). (That you should call `JSON.parse` only once is hopefully obvious) — Bergi, Feb 05 '18 at 13:22

score 0 · Answer 1 · answered Feb 04 '18 at 11:30

0

You could use a destructuring assignment and return an object with short hand properties.

let { field: { obj1, obj2, obj3, obj4, obj5 } } = JSON.parse(payload);
return { obj1, obj2, obj3, obj4, obj5 };

answered Feb 04 '18 at 11:30

Nina Scholz

323,592
20
270
324

That's a lot of repetition, isn't it? – georg Feb 04 '18 at 11:37
it depends, actually it looks like that, but we do not know the original structure. – Nina Scholz Feb 04 '18 at 11:43

score 0 · Answer 2 · answered Feb 04 '18 at 11:57

Edit

Better yet, just parse the whole thing and return the field object. I think that would work. (I'm a little sleep deprived though!)

....then(payload => {
   return (JSON.parse(payload).field);
})

End Edit

Parse the whole response to find the field obj.
Stringify the field obj to prepare it to be copied.
Return the parsed field obj.

-

....then(payload => {
   return (JSON.parse(JSON.stringify(JSON.parse(payload).field)));
})

score 0 · Answer 3 · answered Feb 04 '18 at 12:02

If you use Bluebird you can also do (as you already use Promise.all)

const payloadPromises = Promise.map(sourcePromises, JSON.parse);
return Promise
  .all(payloadPromises)
  .then(payloads => payload.map(payload => ({
    obj1: payload.field.obj1,
    obj2: payload.field.obj2,
  }));

But actually just variable (your second approach) is completely fine. Perhaps, you should only use const instead of let in this case.

Best Practice when converting data in JavaScript

3 Answers3