【问题标题】: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"
    }
 }

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

【问题讨论】:

标签: javascript jquery json object


【解决方案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));

【讨论】:

    猜你喜欢
    • 2019-02-11
    • 2020-06-09
    • 2021-07-21
    • 2018-05-03
    • 2012-06-17
    • 1970-01-01
    • 2020-04-30
    • 2017-06-12
    • 2015-10-31
    相关资源
    最近更新 更多