use underscore or lodash convert one JSON structure to another

Question

I have a problem trying to convert current JSON structure to another

var data = [
  {
    "url": "asset/01.flv",
    "pic": "asset/01.jpg"
  },
  {
    "url": "asset/02.flv",
    "pic": "asset/02.jpg"
  },
  {
    "url": "asset/03.flv",
    "pic": "asset/03.jpg"
  },
  {
    "url": "asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv",
    "pic": "asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"
  },
  {
    "url": "asset/09.flv|asset/10.flv",
    "pic": "asset/09.jpg|asset/10.jpg"
  }
]

I want to convert data to an output structure like this.
Here's the target with just the result I want to achieve.

var data = [
  {
    "url": "asset/01.flv",
    "pic": "asset/01.jpg"
  },
  {
    "url": "asset/02.flv",
    "pic": "asset/02.jpg"
  },
  {
    "url": "asset/03.flv",
    "pic": "asset/03.jpg"
  },
  {
    "url": "asset/04.flv",
    "pic": "asset/04.jpg"
  },
  {
    "url": "asset/05.flv",
    "pic": "asset/05.jpg"
  },
  {
    "url": "asset/06.flv",
    "pic": "asset/06.jpg"
  },
  {
    "url": "asset/07.flv",
    "pic": "asset/07.jpg"
  },
  {
    "url": "asset/08.flv",
    "pic": "asset/08.jpg"
  },
  {
    "url": "asset/09.flv",
    "pic": "asset/09.jpg"
  },
  {
    "url": "asset/10.flv",
    "pic": "asset/10.jpg"
  }
]

It is diffcult for me, could someone help me in this matter? I've tried for several hours. Using lodash or underscore or plain JS is ok. Thanks in advance.

31piy · Accepted Answer · 2018-07-28T16:17:16.780

You can do it with the use of Array#reduce. The idea is to loop over the array and check if the url and pic has | in their values.

If so, split the value and push all items to the result. If not, push the url and pic as it is.

var data = [{"url":"asset/01.flv","pic":"asset/01.jpg"},{"url":"asset/02.flv","pic":"asset/02.jpg"},{"url":"asset/03.flv","pic":"asset/03.jpg"},{"url":"asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv","pic":"asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"},{"url":"asset/09.flv|asset/10.flv","pic":"asset/09.jpg|asset/10.jpg"}];

var result = data.reduce((r, {url, pic}) => {
  if (url.includes('|') && pic.includes('|')) {
    var urls = url.split('|');
    var pics = pic.split('|');
    
    urls.forEach((u, i) => {
      r.push({url: u, pic: pics[i]});
    });
  } else {
    r.push({url, pic})
  }
  
  return r;
}, []);

console.log(result);

Orelsanpls · Answer 2 · 2018-07-27T09:52:12.927

You can use of an Array.reduce to do the manipulation yourself.

const arr = [{
    "url": "asset/01.flv",
    "pic": "asset/01.jpg"
  },
  {
    "url": "asset/02.flv",
    "pic": "asset/02.jpg"
  },
  {
    "url": "asset/03.flv",
    "pic": "asset/03.jpg"
  },
  {
    "url": "asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv",
    "pic": "asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"
  },
  {
    "url": "asset/09.flv|asset/10.flv",
    "pic": "asset/09.jpg|asset/10.jpg"
  }
];

console.log(arr.reduce((tmp, {
  pic,
  url,
}) => {
  const urlSplit = url.split('|');

  return [
    ...tmp,

    ...pic.split('|').map((x, xi) => ({
      pic: x,
      url: urlSplit[xi],
    })),
  ];
}, []));

BlackBeard · Answer 3 · 2018-07-27T10:39:08.923

IMHO, you can do something like this using Array#reduce():

var data = [{"url":"asset/01.flv","pic":"asset/01.jpg"},{"url":"asset/02.flv","pic":"asset/02.jpg"},{"url":"asset/03.flv","pic":"asset/03.jpg"},{"url":"asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv","pic":"asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"},{"url":"asset/09.flv|asset/10.flv","pic":"asset/09.jpg|asset/10.jpg"}];

var parsedData = data.reduce((accumulator, e) => {
  e['url'].split('|').forEach((ele, i) => {
    accumulator.push({"url":ele, "pic": e['pic'].split('|')[i]})
  })
  return accumulator;
}, [])

console.log(parsedData);

Same solution using Underscore.js's _.zip() function.

var data = [{"url":"asset/01.flv","pic":"asset/01.jpg"},{"url":"asset/02.flv","pic":"asset/02.jpg"},{"url":"asset/03.flv","pic":"asset/03.jpg"},{"url":"asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv","pic":"asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"},{"url":"asset/09.flv|asset/10.flv","pic":"asset/09.jpg|asset/10.jpg"}];

var parsedData = data.reduce((accumulator, e) => {
  return accumulator.concat(...(_.zip(e['url'].split('|'), e['pic']
             .split('|'))
             .map(([url, pic]) => ({url, pic}))))
}, []);

console.log(parsedData)

<script src="https://underscorejs.org/underscore-min.js"></script>

Check `flatMap`, `reduce` should be the last resort when no other higher level abstractions work. — tokland, Jul 28 '18 at 17:22

score 1 · Answer 4 · edited Jul 28 '18 at 22:07

1

How about simply use a flatmap with zipWith??

const sortedData = _.flatMap(data, obj =>
    _.zipWith(
        obj.url.split("|"),
        obj.pic.split("|"),
        (url, pic) => ({url, pic})
    )
);

var data = [
  {
    "url": "asset/01.flv",
    "pic": "asset/01.jpg"
  },
  {
    "url": "asset/02.flv",
    "pic": "asset/02.jpg"
  },
  {
    "url": "asset/03.flv",
    "pic": "asset/03.jpg"
  },
  {
    "url": "asset/04.flv|asset/05.flv|asset/06.flv|asset/07.flv|asset/08.flv",
    "pic": "asset/04.jpg|asset/05.jpg|asset/06.jpg|asset/07.jpg|asset/08.jpg"
  },
  {
    "url": "asset/09.flv|asset/10.flv",
    "pic": "asset/09.jpg|asset/10.jpg"
  }
]

var res = _.flatMap(data, o=>_.zipWith(o.url.split("|"), o.pic.split("|"), (url, pic) => ({url, pic})));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

edited Jul 28 '18 at 22:07

tokland

66,169
13
144
170

answered Jul 27 '18 at 13:29

Koushik Chatterjee

4,106
3
18
32

I think this is the most elegant approach. Maybe you can use a proper code block and fix the indention? as a single line is hard to grasp. – tokland Jul 28 '18 at 10:46
Hey thanks @tokland, basically I haven't formatted because I have used only 2 functions *flatMap* and *zipWith* and just performed a much necessary *split*. I have tried a formatter after you suggested, which was breaking it to another line just with the final return statement *({url, pic})*. You can edit if you feel some formatting of that line suits more for better understanding, that will be helpful to others :) – Koushik Chatterjee Jul 28 '18 at 19:13
Done! Feel free to revert it if you don't like so many line breaks ;) – tokland Jul 28 '18 at 22:07

use underscore or lodash convert one JSON structure to another

4 Answers4