flatten json nested array (lodash/deepdash)

Question

I have a nested json array that I need to flatten it and remove the keys(onSale,newComing). Below is the 2 jsons: what I have and what I want it to be. (Javascript-lodash-deepdash)

what I have:

[
  {
    "id": 1,
    "model": "Google Pixel 3",
    "image": "/src/assets/images/high-angle-app-learning-new-language-phone_23-2148293463.jpg",
    "path": "/src/assets/images/high-angle-app-learning-new-language-phone_23-2148293463.jpg",
    "price": 799,
    "quantity": 2
  },
  {
    "id": 2,
    "model": "Samsung Note 9",
    "image": "/src/assets/images/samsung-1283938__340.jpg",
    "price": 999,
    "quantity": 2
  },
  {
    "newComing": [
      {
        "id": 10,
        "model": "Samsung Galaxy A7 (2020)",
        "image": "/src/assets/images/Samsung S7.jpg",
        "price": 533,
        "quantity": 2
      },
      {
        "id": 12,
        "model": "Samsung Galaxy A7 (2018)",
        "path": "https://media.istockphoto.com/photos/new-ios-14-screen-iphone-apples-next-operating-system-for-its-to-be-picture-id1270790424?k=20&m=1270790424&s=612x612&w=0&h=p_1DGqUriFPLKnt1KNbtRwdxJkB0ozkCQ3zE6KZOde8=",
        "image": "https://media.istockphoto.com/photos/new-ios-14-screen-iphone-apples-next-operating-system-for-its-to-be-picture-id1270790424?k=20&m=1270790424&s=612x612&w=0&h=p_1DGqUriFPLKnt1KNbtRwdxJkB0ozkCQ3zE6KZOde8=",
        "price": 630,
        "quantity": 2
      }
    ]
  },
  {
    "onSale": [
      {
        "id": 14,
        "model": "Samsung Galaxy A7 (2018)",
        "path": "https://fdn.gsmarena.com/imgroot/reviews/20/samsung-galaxy-s20-plus/lifestyle/-1024w2/gsmarena_002.jpg",
        "image": "https://fdn.gsmarena.com/imgroot/reviews/20/samsung-galaxy-s20-plus/lifestyle/-1024w2/gsmarena_002.jpg",
        "price": 533,
        "quantity": 2
      },
      {
        "id": 15,
        "model": "Samsung Galaxy A7 (2018)",
        "path": "https://www.phonefinity.net/wp-content/uploads/camon-17-blue.jpg",
        "image": "https://www.phonefinity.net/wp-content/uploads/camon-17-blue.jpg",
        "price": 533,
        "quantity": 2
      }
    ]
  }
]

what i want:

[
  {
    "id": 1,
    "model": "Google Pixel 3",
    "image": "/src/assets/images/high-angle-app-learning-new-language-phone_23-2148293463.jpg",
    "path": "/src/assets/images/high-angle-app-learning-new-language-phone_23-2148293463.jpg",
    "price": 799,
    "quantity": 2
  },
  {
    "id": 2,
    "model": "Samsung Note 9",
    "image": "/src/assets/images/samsung-1283938__340.jpg",
    "price": 999,
    "quantity": 2
  },
  {
    "id": 10,
    "model": "Samsung Galaxy A7 (2020)",
    "image": "/src/assets/images/Samsung S7.jpg",
    "price": 533,
    "quantity": 2
  },
  {
    "id": 12,
    "model": "Samsung Galaxy A7 (2018)",
    "path": "https://media.istockphoto.com/photos/new-ios-14-screen-iphone-apples-next-operating-system-for-its-to-be-picture-id1270790424?k=20&m=1270790424&s=612x612&w=0&h=p_1DGqUriFPLKnt1KNbtRwdxJkB0ozkCQ3zE6KZOde8=",
    "image": "https://media.istockphoto.com/photos/new-ios-14-screen-iphone-apples-next-operating-system-for-its-to-be-picture-id1270790424?k=20&m=1270790424&s=612x612&w=0&h=p_1DGqUriFPLKnt1KNbtRwdxJkB0ozkCQ3zE6KZOde8=",
    "price": 630,
    "quantity": 2
  },
  {
    "id": 14,
    "model": "Samsung Galaxy A7 (2018)",
    "path": "https://fdn.gsmarena.com/imgroot/reviews/20/samsung-galaxy-s20-plus/lifestyle/-1024w2/gsmarena_002.jpg",
    "image": "https://fdn.gsmarena.com/imgroot/reviews/20/samsung-galaxy-s20-plus/lifestyle/-1024w2/gsmarena_002.jpg",
    "price": 533,
    "quantity": 2
  },
  {
    "id": 15,
    "model": "Samsung Galaxy A7 (2018)",
    "path": "https://www.phonefinity.net/wp-content/uploads/camon-17-blue.jpg",
    "image": "https://www.phonefinity.net/wp-content/uploads/camon-17-blue.jpg",
    "price": 533,
    "quantity": 2
  }
]

I have been playing with _.reduce, _.flatmap and been unable to get anything close. Thanks for help.

ProDec · Accepted Answer · 2021-12-02 09:21:17Z

1

flatMap will do.

const array = [ { "id": 1, "model": "Google Pixel 3", "image": "/src/assets/images/high-angle-app-learning-new-language-phone_23-2148293463.jpg", "path": "/src/assets/images/high-angle-app-learning-new-language-phone_23-2148293463.jpg", "price": 799, "quantity": 2 }, { "id": 2, "model": "Samsung Note 9", "image": "/src/assets/images/samsung-1283938__340.jpg", "price": 999, "quantity": 2 }, { "newComing": [ { "id": 10, "model": "Samsung Galaxy A7 (2020)", "image": "/src/assets/images/Samsung S7.jpg", "price": 533, "quantity": 2 }, { "id": 12, "model": "Samsung Galaxy A7 (2018)", "path": "https://media.istockphoto.com/photos/new-ios-14-screen-iphone-apples-next-operating-system-for-its-to-be-picture-id1270790424?k=20&m=1270790424&s=612x612&w=0&h=p_1DGqUriFPLKnt1KNbtRwdxJkB0ozkCQ3zE6KZOde8=", "image": "https://media.istockphoto.com/photos/new-ios-14-screen-iphone-apples-next-operating-system-for-its-to-be-picture-id1270790424?k=20&m=1270790424&s=612x612&w=0&h=p_1DGqUriFPLKnt1KNbtRwdxJkB0ozkCQ3zE6KZOde8=", "price": 630, "quantity": 2 } ] }, { "onSale": [ { "id": 14, "model": "Samsung Galaxy A7 (2018)", "path": "https://fdn.gsmarena.com/imgroot/reviews/20/samsung-galaxy-s20-plus/lifestyle/-1024w2/gsmarena_002.jpg", "image": "https://fdn.gsmarena.com/imgroot/reviews/20/samsung-galaxy-s20-plus/lifestyle/-1024w2/gsmarena_002.jpg", "price": 533, "quantity": 2 }, { "id": 15, "model": "Samsung Galaxy A7 (2018)", "path": "https://www.phonefinity.net/wp-content/uploads/camon-17-blue.jpg", "image": "https://www.phonefinity.net/wp-content/uploads/camon-17-blue.jpg", "price": 533, "quantity": 2 } ] } ];


const flatten = array.flatMap(({newComing, onSale, ...item}) => newComing || onSale || [item]);
console.log(flatten);

const lodash = _.flatMap(array, ({newComing, onSale, ...item}) => newComing || onSale || [item]);
console.log(lodash);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

answered Dec 2, 2021 at 9:21

ProDec

5,4001 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naim R. Over a year ago

Thanks ProGu, but it seems that there is an error in showing array brackets in the result,and some objects are repeated as well (id=1,2) not sure if it can be fixed.

ProDec Over a year ago

@Naim R. I don't get you mean. There are two copies, with pure js & lodash

Naim R. Over a year ago

Sorry proGu, yes it is working !! i apologise and thank you for help.

Collectives™ on Stack Overflow

flatten json nested array (lodash/deepdash)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related