回圈獲取回應中的物件

我試圖通過下面的物件陣列進行回圈，以獲得這種格式的資料值：

Market_Name, District_Name, State, Commodity, Variety, datetimes

市場名稱，地區名稱，州，商品，品種，日期，價格

。

{
    "Market_Name":{
       "0":"A lot"。
       "1"/span>:"很多"。
       "2":"A lot",
       "3":"A lot",
       "4":"A lot"。
       "5":"很多"。
    },
    "District_Name":{
       "0"/span>:"Ratlam"。
       "1":"Ratlam",
       "2":"Ratlam"。
       "3"/span>:"Ratlam",
       "4"/span>:"Ratlam"。
       "5":"Ratlam"。
    },
    "State":{
       "0"/span>:"AP"。
       "1"/span>:"AP"。
       "2"/span>:"AP"。
       "3":"AP"。
       "4"/span>:"AP"。
       "5":"AP"。
    },
    "Commodity":{
       "0":"小麥"。
       "1":"Wheat",
       "2":"Wheat",
       "3":"小麥"。
       "4":"小麥"。
       "5":"Wheat"。
    },
    "Variety":{
       "0":"中等"。
       "1":"中"。
       "2":"Medium",
       "3":"中等"。
       "4":"中"。
       "5":"中等"。
    },
    "datetimes":{
       "0"/span>:"2020-01-01"/span>。
       "1":"2020-01-02"。
       "2":"2020-01-03"。
       "3"："2020-01-04"。
       "4"："2020-01-05"。
       "5":"2020-01-06"
    },
    "價格":{
       "0"/span>:"1981"/span>。
       "1"/span>:"1970"。
       "2":"1981"。
       "3":"1970"。
       "4":"1968"。
       "5":"1974"。
    }
 }

我已經做了一些腳本，但似乎都沒有得到我想要的結果。誰能幫助我解決這個問題？

uj5u.com熱心網友回復：

你沒有一個陣列，你有一個物件。你應該使用Object. entries，這時你可以簡單地reduce。

你沒有給出你的精確的目標形狀，但我只能假設它是這樣的。

。

const data = {
  "Market_Name": {
    "0":"A lot", "1": "很多", "2":"很多" ,
    "3":"很多", "4": "很多", "5":"很多"。
  },
  "District_Name":{
    "0"/span>:"Ratlam"/span>, "1"/span>: "Ratlam", "2"："Ratlam"。
    "3"/span>:"Ratlam", "4"/span>: "Ratlam", "5"："Ratlam"。
  },
  "State":{
    "0"/span>:"AP"/span>, "1"/span>: "AP", "2"："AP"。
    "3"/span>:"AP"/span>, "4"/span>: "AP", "5"："AP"。
  },
  "Commodity":{
    "0":"小麥", "1": "小麥", "2":"小麥"。
    "3":"小麥", "4": "小麥", "5":"小麥".
  },
  "Variety":{
    "0"/span>:"中等"/span>, "1"/span>: "中等", "2":"中等"。
    "3":"中", "4": "中等", "5":"中等"。
  },
  "datetimes":{
    "0"/span>:"2020-01-01", "1"/span>: "2020-01-02", "2":"2020-01-03",
    "3"/span>:"2020-01-04", "4"/span>: "2020-01-05", "5":"2020-01-06",
  },
  "價格":{
    "0"/span>:"1981"/span>, "1"/span>: "1970"/span>, "2"/span>:"1981"/span>,
    "3"/span>:"1970"/span>, "4"/span>: "1968"/span>, "5"/span>:"1974"/span>,
  },
};
 
const transformed = Object.values(Object.entries(data)
  .reduce((acc, [ key, value ]/span>) => {
    Object.values(value).forEach((data, i) =>  {
      if (!acc[i]) acc[i] = { };
      acc[i][key] = data。
    });
    return acc;
  }, { }));
  
console.log(transformed); 

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

這就建立了一個看起來像

的物件

{
  "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 回圈而不是 .reduce 來寫。這也許會更容易理解。

顯示代碼片段

const data = {
  "Market_Name": {
    "0":"A lot", "1": "很多", "2":"很多" ,
    "3":"很多", "4": "很多", "5":"很多"。
  },
  "District_Name":{
    "0"/span>:"Ratlam"/span>, "1"/span>: "Ratlam", "2"："Ratlam"。
    "3"/span>:"Ratlam", "4"/span>: "Ratlam", "5"："Ratlam"。
  },
  "State":{
    "0"/span>:"AP"/span>, "1"/span>: "AP", "2"："AP"。
    "3"/span>:"AP"/span>, "4"/span>: "AP", "5"："AP"。
  },
  "Commodity":{
    "0":"小麥", "1": "小麥", "2":"小麥"。
    "3":"小麥", "4": "小麥", "5":"小麥".
  },
  "Variety":{
    "0"/span>:"中等"/span>, "1"/span>: "中等", "2":"中等"。
    "3":"中", "4": "中等", "5":"中等"。
  },
  "datetimes":{
    "0"/span>:"2020-01-01", "1"/span>: "2020-01-02", "2":"2020-01-03",
    "3"/span>:"2020-01-04", "4"/span>: "2020-01-05", "5":"2020-01-06",
  },
  "價格":{
    "0"/span>:"1981"/span>, "1"/span>: "1970"/span>, "2"/span>:"1981"/span>,
    "3"/span>:"1970"/span>, "4"/span>: "1968"/span>, "5"/span>:"1974"/span>,
  },
};

const alteredKeys = { };

for (const [ key, nested ] of Object.entries（data）) {
  for (const [ i, value ] of Object.entries（嵌套）) {
    if (! alteredKeys[i]) alteredKeys[i] = { };
    alteredKeys[i][key] = value;
  }
}

const transformed = Object.values（alteredKeys）。

console.log(transformed); 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

你可以通過為行和列創建索引/名稱來清理代碼。找到行的數量和列的名稱。然后遍歷資料。

。

const combine = (obj) => {
  const cols = Object.keys（obj）。
  const rows = Object.keys(obj["Market_Name"/span>])。

  return rows.map((rowId) =>/span>
    cols.reduce((m, colId) =>/span> {
      m[colId] = obj[colId][rowId]。
      return m。
    }, {})
  );
};

//Simple version[/span]（簡單版本

const combine2=（obj）=> {
  const cols = Object.keys（obj）。
  //take first col keys as rows count[/span].
  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: "很多"。
    2: "A lot",
    3: "A lot",
    4: "A lot",
    5: "A lot",
  },
  區_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"。
  },
  商品: {
    0: "Wheat",
    1: "Wheat",
    2: "Wheat",
    3: "Wheat",
    4: "Wheat",
    5: "Wheat",
  },
  品種: {
    0: "中等"。
    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",
  },
  價格: {
    0: "1981"/span>,
    1: "1970"。
    2: "1981"。
    3: "1970"。
    4: "1968"。
    5: "1974"。
  },
};
console.log（combine（data））。
console.log(combine2(data)); 

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312761.html

標籤：

上一篇：我如何在一個物件上回圈，并將它們呈現為<li></li>：<li></li>？

下一篇：如何在陣列內替換多個物件屬性