fixed Typescript Hard issue: Implement Fetch and Display Functions for Product List #649

[hubsMIT1]

Description

fixes: #649

• fetchData Function:
  Used fetch API to get data from https://dummyjson.com/products.
  Parsed JSON, updating global products.

• displayProducts Function:
  Cleared previous table rows.
  Created HTML rows for each product.

• applyFilters Function:
  Filtered products based on criteria.

Additional Context

I'm new to open source. Please suggest for any additional implementations or ways to help me improve.
Thank you!

[pull-request-quantifier-deprecated]

This PR has 40 quantified lines of changes. In general, a change size of upto 200 lines is ideal for the best PR experience!

---

Quantification details

Label      : Extra Small
Size       : +26 -14
Percentile : 16%

Total files changed: 1

Change summary by file extension:
.ts : +26 -14

Change counts above are quantified counts, based on the PullRequestQuantifier customizations.

Why proper sizing of changes matters

Optimal pull request sizes drive a better predictable PR flow as they strike a
balance between between PR complexity and PR review overhead. PRs within the
optimal size (typical small, or medium sized PRs) mean:

• Fast and predictable releases to production:
  • Optimal size changes are more likely to be reviewed faster with fewer
    iterations.
  • Similarity in low PR complexity drives similar review times.
• Review quality is likely higher as complexity is lower:
  • Bugs are more likely to be detected.
  • Code inconsistencies are more likely to be detected.
• Knowledge sharing is improved within the participants:
  • Small portions can be assimilated better.
• Better engineering practices are exercised:
  • Solving big problems by dividing them in well contained, smaller problems.
  • Exercising separation of concerns within the code changes.

What can I do to optimize my changes

• Use the PullRequestQuantifier to quantify your PR accurately
  • Create a context profile for your repo using the context generator
  • Exclude files that are not necessary to be reviewed or do not increase the review complexity. Example: Autogenerated code, docs, project IDE setting files, binaries, etc. Check out the Excluded section from your prquantifier.yaml context profile.
  • Understand your typical change complexity, drive towards the desired complexity by adjusting the label mapping in your prquantifier.yaml context profile.
  • Only use the labels that matter to you, see context specification to customize your prquantifier.yaml context profile.
• Change your engineering behaviors
  • For PRs that fall outside of the desired spectrum, review the details and check if:
    • Your PR could be split in smaller, self-contained PRs instead
    • Your PR only solves one particular issue. (For example, don't refactor and code new features in the same PR).

How to interpret the change counts in git diff output

• One line was added: +1 -0
• One line was deleted: +0 -1
• One line was modified: +1 -1 (git diff doesn't know about modified, it will
  interpret that line like one addition plus one deletion)
• Change percentiles: Change characteristics (addition, deletion, modification)
  of this PR in relation to all other PRs within the repository.

---

Was this comment helpful? 👍  :ok_hand:  :thumbsdown: (Email)
Customize PullRequestQuantifier for this repository.

[nikohoffren]

Looks good!

[nikohoffren]

Code looks really good! It is generally good idea to check if the response is actually ok with something like this:

if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
}

Otherwise, i don't really see any major things that could be improved here, nicely done!

[hubsMIT1]

yeah, next time i'll take care.
Thank you!

[nikohoffren]

Merged

This is an automated message from Fork, Commit, Merge [BOT].

Thank you for your contribution! Your pull request has been merged. The files have been reset for the next contributor.

What's next?

If you're looking for more ways to contribute, I invite you to check out my other projects. Just click here to find more. These projects contain real issues that you can help resolve. You can also check out the Influences section in the README to find more projects similar to this one.

Also please leave a star to this project if you feel it helped you, i would really appreciate it.

I look forward to seeing your contributions!