Nested Maps for Next getStaticPaths Params

Question

Imagine your data structure is like :

data = {
  "cse": {
    "first": [
      "Computer Hardware Essentials",
      "Computer System Essentials",
      "Cultural Education"
    ],
    "second": [
      "Discrete Mathematics",
      "Linear Algebra",
      "Engineering Physics - A",
    ],
    "third": [
      "Numerical Methods",
      "Optimization Techniques",
      "Digital Electronics",
    ],
    "fourth": [
      "Probability and Random Processes",
      "Data Structures and Algorithms",
      "Theory of Computation"
   ]
     }
   }

And you have the following route /[semester]/[subject] so the Next.js structure folder is: [semester]/[subject].js

How will we integrate through the data so that we can get the getStaticPaths params in a single nested loop?

Required Data :

[
{ params: {semester: "first", subject: "computer-hardware-essentials"}},
{ params: {semester: "first", subject: "computer-system-essentials"}},
{ params: {semester: "first", subject: "cultutal-education"}},
{ params: {semester: "second", subject: "discrete-mathemetics"}},
{ params: {semester: "second", subject: "linear-algebra"}},
{ params: {semester: "second", subject: "engineering-physics-a"}},
{ params: {semester: "third", subject: "numerical-methods"}},
{ params: {semester: "third", subject: "optimization-techniques"}},
{ params: {semester: "third", subject: "digital-electronics"}},
{ params: {semester: "fourth", subject: "probability-and-random-process"}},
{ params: {semester: "fourth", subject: "data-structure-and-algorithms"}},
{ params: {semester: "fourth", subject: "theory-of-computation"}}
]

Samuel Goldenbaum · Accepted Answer · 2021-10-01 21:19:24Z

Loop through the object using for...in and then loop the inner array using forEach to add each subject to an array:

const results = [];
for (const x in data.cse) {
  data.cse[x].forEach((s) => {
    results.push({
      params: {
        semester: x,
        subject: s
      }
    });
  });
}

const data = {
  "cse": {
    "first": [
      "Computer Hardware Essentials",
      "Computer System Essentials",
      "Cultural Education"
    ],
    "second": [
      "Discrete Mathematics",
      "Linear Algebra",
      "Engineering Physics - A",
    ],
    "third": [
      "Numerical Methods",
      "Optimization Techniques",
      "Digital Electronics",
    ],
    "fourth": [
      "Probability and Random Processes",
      "Data Structures and Algorithms",
      "Theory of Computation"
    ]
  }
}

const results = [];
for (const x in data.cse) {
  data.cse[x].forEach((s) => {
    results.push({
      params: {
        semester: x,
        subject: s
      }
    });
  });
}

console.info(results);

Simon Bruneaud · Accepted Answer · 2021-10-01 21:26:47Z

0

Using functional methods you can loop over entries of data.cse and then chain with .flatMap

const result = Object.entries(data.cse).flatMap(([key, value]) => {
  return value.map(i => {
    return { 
      params: {
        semester: key,
        subject: i.toLowerCase().replaceAll(' ', '-')
      }
    }
  })
})

answered Oct 1, 2021 at 21:26

Simon Bruneaud

2,6273 gold badges17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Nested Maps for Next getStaticPaths Params

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related