如何将2个或多个API来源合并到一个表格中(React,HTML)

huangapple go评论69阅读模式
英文:

How to combine 2 or more API sources into one table (React, HTML)

问题

所以我有3个API来源,以这种格式返回数据

  1. firstSource = [{month, endDate, expectedPrice}] ->12个对象的数组
  2. secondSource = [{month, value}] ->12个对象的数组
  3. thirdSource = [{month, value}] ->12个对象的数组

例子:

  1. secondSource = [
  2. {month: 1, value: 234.22},
  3. {month: 2, value: 123.58},
  4. {month: 3, value: 255.35},
  5. ...
  6. ...
  7. 你明白我的意思吧
  8. ]

我找到了这个解决方案,它使用了lodash库。这都很好,但我对一个不需要外部库的解决方案感兴趣。所以基本上,我想要达到与lodash解决方案中的人相同的目标 -> 将所有三个数据源合并到一个数据源中,然后使用它来在<table>元素中显示数据,只是不使用外部库,如lodash。

期望的输出:

  1. combined = [
  2. {month, endDate, expectedPrice, secondSourceValue, thirdSourceValue}
  3. ]

有什么想法?

英文:

So I have 3 API sources that return data in this format

  1. firstSource = [{month, endDate, expectedPrice}] ->array of 12 objects
  2. secondSource = [{month, value}] ->array of 12 objects
  3. thirdSource = [{month, value}] ->array of 12 objects

example:

  1. secondSource = [
  2. {month: 1, value: 234.22},
  3. {month: 2, value: 123.58},
  4. {month: 3, value: 255.35},
  5. ...
  6. ...
  7. you get the idea
  8. ]

I've come across this solution that uses lodash library. This is all well, but I'm interested in a solution that doesn't require external libraries. So basically, I want to achieve the same thing the person from the lodash solution did -> combine all three data sources into one and then use that to display the data in <table> element, only without using external libraries, e.g. lodash.

Expected output:

  1. combined = [
  2. {month, endDate, expectedPrice, secondSourceValue, thirdSourceValue}
  3. ]

Any ideas?

答案1

得分: 1

你只需检查第二个和第三个来源的长度是否与主要来源相同。

英文:

what's the problem to try something like this?

  1. let combinedData = []
  2. firstSource.forEach((element, index) => {
  3. combinedData[index] = {
  4. month: element.month,
  5. endDate: element.endDate,
  6. expectedPrice: element.expectedPrice,
  7. secondSourceValue: secondSource[index].value,
  8. thirdSourceValue: thirdSource[index].value
  9. }
  10. });

You only have to check if the second and third sources have the same length with the main.

答案2

得分: 0

我们可以使用 array.map 来合并多个对象数组,并创建一个包含所有对象属性的新数组。

需要注意的是,在这种情况下,所有数组的长度应该是相同的。

以下是 JavaScript 代码示例:

  1. let arr1 = [
  2. {
  3. month: 1,
  4. value: 234.22,
  5. date: 'JAN'
  6. },
  7. {
  8. month: 2,
  9. value: 123.58,
  10. date: 'FEB'
  11. },
  12. {
  13. month: 3,
  14. value: 255.35,
  15. date: 'MARCH'
  16. }
  17. ]
  18. let arr2 = [
  19. {
  20. month: 1,
  21. property: 1
  22. },
  23. {
  24. month: 2,
  25. property: 2
  26. },
  27. {
  28. month: 3,
  29. property: 3
  30. }
  31. ]
  32. let arr3 = [
  33. {
  34. month: 1,
  35. property: 9
  36. },
  37. {
  38. month: 2,
  39. property: 8
  40. },
  41. {
  42. month: 3,
  43. property: 7
  44. },
  45. ]
  46. let combinedArr = arr1.map((item, index) => {
  47. return {
  48. ...item,
  49. ...arr2[index],
  50. ...arr3[index]
  51. }
  52. })
  53. console.log(combinedArr)

这段代码会将 arr1arr2arr3 的对象数组合并为一个新的数组 combinedArr,每个对象包含来自所有原始数组的属性。

英文:

We can use array.mapto merge multiple arrays of objects and create a new array with properties of all objects.

Do note that, in this case, the length of all the arrays should be the same.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let arr1 = [{
  2. month: 1,
  3. value: 234.22,
  4. date: &#39;JAN&#39;
  5. },
  6. {
  7. month: 2,
  8. value: 123.58,
  9. date: &#39;FEB&#39;
  10. },
  11. {
  12. month: 3,
  13. value: 255.35,
  14. date: &#39;MARCH&#39;
  15. }
  16. ]
  17. let arr2 = [{
  18. month: 1,
  19. property: 1
  20. },
  21. {
  22. month: 2,
  23. property: 2
  24. },
  25. {
  26. month: 3,
  27. property: 3
  28. }
  29. ]
  30. let arr3 = [{
  31. month: 1,
  32. property: 9
  33. },
  34. {
  35. month: 2,
  36. property: 8
  37. },
  38. {
  39. month: 3,
  40. property: 7
  41. },
  42. ]
  43. let combinedArr = arr1.map((item, index) =&gt; {
  44. return {
  45. ...item,
  46. ...arr2[index],
  47. ...arr3[index]
  48. }
  49. })
  50. console.log(combinedArr)

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月16日 19:40:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/75471742.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定