【问题标题】:Converting Data Into An Array Of Arrays将数据转换为数组数组
【发布时间】:2018-09-12 13:09:38
【问题描述】:

我目前有从 PHP (Laravel) 完成的应用程序后端以格式返回的数据:

data [
   {
     "Jan": 120,
     "Feb": 283.5,
     "Mar": 10,
     "Apr": 233.92,
     "May": 327.78,
     "Jun": 190.74,
     "Jul": 10,
     "Aug": 10,
     "Sep": 10,
     "Oct": 10,
     "Nov": 10,
     "Dec": 10
   }
]

然后我想在前端使用 JavaScript (Vue) 绘制这些数据,即特定公司按月的平均订单价值。虽然要使其正常工作,但它需要采用以下格式:

new_data [
  ["Jan", 120],
  ["Feb", 283.5],
  ["Mar", 10],
  ["Apr", 233.92],
  ["May", 327.78],
  ["Jun", 190.74],
  ["Jul", 10],
  ["Aug", 10],
  ["Sep", 10],
  ["Oct", 10],
  ["Nov", 10],
  ["Dec", 10]
]

我已经看到如何在 Stack Overflow(即Object to Array (an array of arrays))上为类似的事情执行此操作,但没有一个适合这个确切的示例。

【问题讨论】:

    标签: javascript arrays object


    【解决方案1】:

    Array.map()Object.entries() 并由 spreading 展平为 Array.concat()

    const data = [{"Jan":120,"Feb":283.5,"Mar":10,"Apr":233.92,"May":327.78,"Jun":190.74,"Jul":10,"Aug":10,"Sep":10,"Oct":10,"Nov":10,"Dec":10}]
    
    const result = [].concat(...data.map(Object.entries))
    
    console.log(result)

    【讨论】:

    • 他不是要一个扁平的结构吗?所以我猜data.map(Object.entries) 会做吗?如果你问我,这仍然是一个足够有效的答案,所以赞成。
    • 确实如此。但是,在问题中,结果被展平,因为它不包含包装项目的子数组。
    • 哦,对了,我错过了。所以他实际上是在要求一个扁平的结构。
    【解决方案2】:

    执行此操作的经典方法是:

    var data = [
       {
         "Jan": 120,
         "Feb": 283.5,
         "Mar": 10,
         "Apr": 233.92,
         "May": 327.78,
         "Jun": 190.74,
         "Jul": 10,
         "Aug": 10,
         "Sep": 10,
         "Oct": 10,
         "Nov": 10,
         "Dec": 10
       }
    ];
    var dataArry = new Array();
    for(month in data[0]){
      dataArry[dataArry.length] = [month,data[0][month]];
    }
    

    在上述代码中,dataArryArray 格式保存对象数据。

    【讨论】:

      【解决方案3】:

      由于您从后端获取的是对象而不是数组,因此除了循环​​遍历对象的属性并将值推送到新数组中之外,我没有找到其他解决方案。 看起来像这样:

      var newData = [];
      Object.keys(data[0]).forEach(function(month) {
          newData.push[month, data[0][month]];
      });
      

      【讨论】:

      • 我猜Object.keys(data[0]) 可以代替Object.keys(data)。不过不确定。
      • 对于这种情况,你是对的。更新。 Ori Drori 的解决方案更加优雅
      猜你喜欢
      • 1970-01-01
      • 2020-12-24
      • 1970-01-01
      • 2022-11-04
      • 2021-11-18
      • 2014-07-03
      • 1970-01-01
      • 2012-04-03
      • 1970-01-01
      相关资源
      最近更新 更多