从获取响应中循环遍历对象

Posted

技术标签:

【中文标题】从获取响应中循环遍历对象【英文标题】:Loop through objects from fetch response 【发布时间】:2021-11-07 21:21:25 【问题描述】:

我正在尝试遍历下面的对象数组以获取这种格式的数据值:

Market_Name、District_Name、州、商品、品种、日期时间、价格


    "Market_Name":
       "0":"A lot",
       "1":"A lot",
       "2":"A lot",
       "3":"A lot",
       "4":"A lot",
       "5":"A lot"
    ,
    "District_Name":
       "0":"Ratlam",
       "1":"Ratlam",
       "2":"Ratlam",
       "3":"Ratlam",
       "4":"Ratlam",
       "5":"Ratlam"
    ,
    "State":
       "0":"AP",
       "1":"AP",
       "2":"AP",
       "3":"AP",
       "4":"AP",
       "5":"AP"
    ,
    "Commodity":
       "0":"Wheat",
       "1":"Wheat",
       "2":"Wheat",
       "3":"Wheat",
       "4":"Wheat",
       "5":"Wheat"
    ,
    "Variety":
       "0":"Medium",
       "1":"Medium",
       "2":"Medium",
       "3":"Medium",
       "4":"Medium",
       "5":"Medium"
    ,
    "datetimes":
       "0":"2020-01-01",
       "1":"2020-01-02",
       "2":"2020-01-03",
       "3":"2020-01-04",
       "4":"2020-01-05",
       "5":"2020-01-06"
    ,
    "Price":
       "0":"1981",
       "1":"1970",
       "2":"1981",
       "3":"1970",
       "4":"1968",
       "5":"1974"
    
 

我已经编写了一些脚本,但似乎没有一个能得到我想要的结果。谁能帮助解决这个问题?

【问题讨论】:

请检查以下How to iterate object in JS和How to iterate an array in JS 你能分享一些代码吗? 其实我已经清除了,因为它不起作用 【参考方案1】:

你没有数组;你有一个对象。您应该使用Object.entries,此时您可以简单地使用reduce

你没有给出你的确切目标形状,但我只能假设它是这样的。

const data = 
  "Market_Name": 
    "0":"A lot", "1":"A lot", "2":"A lot",
    "3":"A lot", "4":"A lot", "5":"A lot",
  ,
  "District_Name":
    "0":"Ratlam", "1":"Ratlam", "2":"Ratlam",
    "3":"Ratlam", "4":"Ratlam", "5":"Ratlam",
  ,
  "State":
    "0":"AP", "1":"AP", "2":"AP",
    "3":"AP", "4":"AP", "5":"AP",
  ,
  "Commodity":
    "0":"Wheat", "1":"Wheat", "2":"Wheat",
    "3":"Wheat", "4":"Wheat", "5":"Wheat"
  ,
  "Variety":
    "0":"Medium", "1":"Medium", "2":"Medium",
    "3":"Medium", "4":"Medium", "5":"Medium",
  ,
  "datetimes":
    "0":"2020-01-01", "1":"2020-01-02", "2":"2020-01-03",
    "3":"2020-01-04", "4":"2020-01-05", "5":"2020-01-06",
  ,
  "Price":
    "0":"1981", "1":"1970", "2":"1981",
    "3":"1970", "4":"1968", "5":"1974",
  ,
;
 
const transformed = Object.values(Object.entries(data)
  .reduce((acc, [ key, value ]) => 
    Object.values(value).forEach((data, i) => 
      if (!acc[i]) acc[i] =  ;
      acc[i][key] = data;
    );
    return acc;
  ,   ));
  
console.log(transformed);

这会构建一个看起来像的对象


  "0":  /* [market_name][0], [district_name][0] */ ,
  "1":  /* [market_name][1], [district_name][1] */ ,
  /* and so on... */
  "n":  /* [field_name_1][n], [field_name_n][n] */ 

然后使用Object.values 从中取出一个数组。使用 Object 作为中间步骤允许我们在任意索引处添加内容,然后再将其还原为数组。


这也是一样的,用经典的for-loops 代替.reduce。可能会更容易理解。

const data = 
  "Market_Name": 
    "0":"A lot", "1":"A lot", "2":"A lot",
    "3":"A lot", "4":"A lot", "5":"A lot",
  ,
  "District_Name":
    "0":"Ratlam", "1":"Ratlam", "2":"Ratlam",
    "3":"Ratlam", "4":"Ratlam", "5":"Ratlam",
  ,
  "State":
    "0":"AP", "1":"AP", "2":"AP",
    "3":"AP", "4":"AP", "5":"AP",
  ,
  "Commodity":
    "0":"Wheat", "1":"Wheat", "2":"Wheat",
    "3":"Wheat", "4":"Wheat", "5":"Wheat"
  ,
  "Variety":
    "0":"Medium", "1":"Medium", "2":"Medium",
    "3":"Medium", "4":"Medium", "5":"Medium",
  ,
  "datetimes":
    "0":"2020-01-01", "1":"2020-01-02", "2":"2020-01-03",
    "3":"2020-01-04", "4":"2020-01-05", "5":"2020-01-06",
  ,
  "Price":
    "0":"1981", "1":"1970", "2":"1981",
    "3":"1970", "4":"1968", "5":"1974",
  ,
;

const alteredKeys =  ;

for (const [ key, nested ] of Object.entries(data)) 
  for (const [ i, value ] of Object.entries(nested)) 
    if (!alteredKeys[i]) alteredKeys[i] =  ;
    alteredKeys[i][key] = value;
  


const transformed = Object.values(alteredKeys);

console.log(transformed);

【讨论】:

您对数据外观的假设是正确的。它奏效了,非常感谢【参考方案2】:

您可以通过为行和列创建索引/名称来清理代码。查找行数和列名。并遍历数据。

const combine = (obj) => 
  const cols = Object.keys(obj);
  const rows = Object.keys(obj["Market_Name"]);

  return rows.map((rowId) =>
    cols.reduce((m, colId) => 
      m[colId] = obj[colId][rowId];
      return m;
    , )
  );
;

//Simple version

const combine2 = (obj) => 
  const cols = Object.keys(obj);
  //take first col keys as rows count
  const noOfRows = Object.keys(obj[cols[0]]).length;
  let rows = [];
  for (let rowId = 0; rowId < noOfRows; rowId++) 
    let row = ;
    for (let col of cols) 
      row[col] = obj[col][rowId];
    
    rows.push(row);
  
  return rows;
;
const data = 
  Market_Name: 
    0: "A lot",
    1: "A lot",
    2: "A lot",
    3: "A lot",
    4: "A lot",
    5: "A lot",
  ,
  District_Name: 
    0: "Ratlam",
    1: "Ratlam",
    2: "Ratlam",
    3: "Ratlam",
    4: "Ratlam",
    5: "Ratlam",
  ,
  State: 
    0: "AP",
    1: "AP",
    2: "AP",
    3: "AP",
    4: "AP",
    5: "AP",
  ,
  Commodity: 
    0: "Wheat",
    1: "Wheat",
    2: "Wheat",
    3: "Wheat",
    4: "Wheat",
    5: "Wheat",
  ,
  Variety: 
    0: "Medium",
    1: "Medium",
    2: "Medium",
    3: "Medium",
    4: "Medium",
    5: "Medium",
  ,
  datetimes: 
    0: "2020-01-01",
    1: "2020-01-02",
    2: "2020-01-03",
    3: "2020-01-04",
    4: "2020-01-05",
    5: "2020-01-06",
  ,
  Price: 
    0: "1981",
    1: "1970",
    2: "1981",
    3: "1970",
    4: "1968",
    5: "1974",
  ,
;
console.log(combine(data));
console.log(combine2(data));

【讨论】:

以上是关于从获取响应中循环遍历对象的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中循环遍历JSON响应!

js的Dom对象集合循环遍历过程中数组长度发生变化,小白不懂,求大神指教

js数组遍历和对象遍历

js数组遍历和对象遍历

Node.js 循环遍历嵌套的 Javascript 对象

如何遍历从 REST API 获得的响应对象并以角度 2 在视图中显示数据