Using Javascript to construct objects using multiple iterations

Question

Using Javascript to construct objects using multiple iterations

I am seeking clarification on how to handle mock data that includes multiple reviews for each product.

The review_id is incremented based on the primary key, while the product_id may have duplicate values due to multiple reviews being associated with the same product. Here's an example:

const data = [
  { review_id: 1, product_id: 1 },
  { review_id: 2, product_id: 1 },
  { review_id: 3, product_id: 2 },
  { review_id: 4, product_id: 2 },
  { review_id: 5, product_id: 3 },
  { review_id: 6, product_id: 3 },

 (...)

];

I attempted to generate objects in an array using a nested loop:

const reviewLength = 10;
const productLength = 2;

const mappedReview = [];
for (let i = 1; i <= reviewLength; i++) {
  for (let j = 1; j <= productLength; j++) {
    const review_id = i * j;
    const product_id = j;

    mappedReview[i * j - 1] = {
      review_id,
      product_id
    };
  }
}

console.log(mappedReview);

However, instead of generating objects, the console output was:

[ { review_id: 1, product_id: 1 },
  { review_id: 2, product_id: 1 },
  { review_id: 3, product_id: 1 },
  { review_id: 4, product_id: 1 },
  { review_id: 5, product_id: 1 },
  { review_id: 6, product_id: 1 },
  { review_id: 7, product_id: 1 },
  { review_id: 8, product_id: 1 },
  { review_id: 9, product_id: 1 },
  { review_id: 10, product_id: 1 },
  <1 empty item>,
  { review_id: 12, product_id: 2 },
  <1 empty item>,
  { review_id: 14, product_id: 2 },
  <1 empty item>,
  { review_id: 16, product_id: 2 },
  <1 empty item>,
  { review_id: 18, product_id: 2 },
  <1 empty item>,
  { review_id: 20, product_id: 2 } ]

It appears that the loops were executed correctly, but the presence of <1 empty item> suggests null values in the output.

javascript object for-loop

Answer 1

Answer №1

If you want to ensure that your product_id increases for every productLength entries in the mapped review, you can achieve this using a single loop:

const reviewLength = 10;
const productLength = 2;

const mappedReview = [];
let product_id = 1;
let product_counter = 1; // Keeps track of when to increment product_id
for (let review_id = 1; review_id <= reviewLength; review_id++) {
    // Add object with review_id and product_id
    mappedReview.push({review_id, product_id});
    // Increment product_id if needed
    if (product_counter++ === productLength) {
        ++product_id;
        product_counter = 1;
    }
}

console.log(mappedReview);

.as-console-wrapper {
    max-height: 100% !important;
}

Alternatively, you can calculate product_id directly based on the review_id value:

const reviewLength = 10;
const productLength = 2;

const mappedReview = [];
for (let review_id = 1; review_id <= reviewLength; review_id++) {
    // Add object with review_id and calculated product_id
    mappedReview.push({
        review_id,
        product_id: Math.ceil(review_id / productLength)
     });
}

console.log(mappedReview);

.as-console-wrapper {
    max-height: 100% !important;
}

In a comment, you inquired about using array methods like map or reduce:

Can I use the array methods map,reduce, etc. to express this case?

You could potentially use a combination of array methods like map by creating an array first, filling it, and then mapping over it. However, utilizing the mapping callback feature of Array.from seems more appropriate:

const reviewLength = 10;
const productLength = 2;

const mappedReview = Array.from({length: reviewLength}, (_, index) => ({
    review_id: index + 1,
    product_id: Math.ceil((index + 1) / productLength)
}));

console.log(mappedReview);

.as-console-wrapper {
    max-height: 100% !important;
}

To incorporate a map function, you could do something like

Array.from({length: reviewLength},

followed by (Array(reviewLength).fill().map(:

const mappedReview = Array(reviewLength).fill(0).map((_, index) => ({
    // ...
}));

Answer 2

If you want to ensure that your product_id increases for every productLength entries in the mapped review, you can achieve this using a single loop:

const reviewLength = 10;
const productLength = 2;

const mappedReview = [];
let product_id = 1;
let product_counter = 1; // Keeps track of when to increment product_id
for (let review_id = 1; review_id <= reviewLength; review_id++) {
    // Add object with review_id and product_id
    mappedReview.push({review_id, product_id});
    // Increment product_id if needed
    if (product_counter++ === productLength) {
        ++product_id;
        product_counter = 1;
    }
}

console.log(mappedReview);

.as-console-wrapper {
    max-height: 100% !important;
}

Alternatively, you can calculate product_id directly based on the review_id value:

const reviewLength = 10;
const productLength = 2;

const mappedReview = [];
for (let review_id = 1; review_id <= reviewLength; review_id++) {
    // Add object with review_id and calculated product_id
    mappedReview.push({
        review_id,
        product_id: Math.ceil(review_id / productLength)
     });
}

console.log(mappedReview);

.as-console-wrapper {
    max-height: 100% !important;
}

In a comment, you inquired about using array methods like map or reduce:

Can I use the array methods map,reduce, etc. to express this case?

You could potentially use a combination of array methods like map by creating an array first, filling it, and then mapping over it. However, utilizing the mapping callback feature of Array.from seems more appropriate:

const reviewLength = 10;
const productLength = 2;

const mappedReview = Array.from({length: reviewLength}, (_, index) => ({
    review_id: index + 1,
    product_id: Math.ceil((index + 1) / productLength)
}));

console.log(mappedReview);

.as-console-wrapper {
    max-height: 100% !important;
}

To incorporate a map function, you could do something like

Array.from({length: reviewLength},

followed by (Array(reviewLength).fill().map(:

const mappedReview = Array(reviewLength).fill(0).map((_, index) => ({
    // ...
}));

Using Javascript to construct objects using multiple iterations

Answer №1

Similar questions

Sending a `refresh` to a Context

Unable to transmit information using Postman for registration API

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

Why won't my AngularJS Google Maps marker trigger any events?

Troubleshooting problem with Materialize CSS in UI router

When tapping on grid items in the Safari browser using React Material-UI, they mysteriously switch positions

"Troubleshooting: Issue with Material-UI TextField not

Deciphering the method to retain added text

Exploring Commitments in React

Implementing Material-UI Autocomplete: How to Include a Starting Value for the startAdornment

The challenge with handling matrix arrays in Javascript

Best JavaScript approach for discovering time-dependent occurrences

Show HTML form elements on the page using jQuery or JavaScript

The sorting process fails to make any changes, thus leaving the state unaffected

Error message: Discord bot written in JS is unable to read the property 'execute' as it is undefined

React component state change in reverse

Can someone help me identify the issue with my JavaScript code?

Caution: It is important for every child within a list to possess a distinct "key" prop. What is the solution to this issue?

What is the best way to verify if all the elements in an array of strings are present within the array?

Is it possible for the await block to be located outside of the async function that contains it?