JS 如何動態抓取object內容

js 動態取值

noway 2024-08-13 15:28:01 ‧ 709 瀏覽

分享至

您好：

有資料類似
grid

類別,   量  ，限制量
W14,   1    ,10
W12,   2    ,5
W14,   3    ,10
W50,   2    ,20
W14,   8    ,10

要如何跑迴圈，讓他檢查出W14 =1+3+8=12 超出限制量10
謝謝

請問在js中，要如何動態提取資料，如下
我於迴圈，

let objPost = new Object();
 第一回圈填入
 objPost.w14 = 1;  --迴圈填入
 

當第二筆迴圈時，
有可能是 W11 ，W50，W14 ， 比如 

第2筆
objPost.w12 = 2;  -->因為objPost 沒有w12，所以objPost 新增一筆 w12

第三筆資料
w14， 有找到 (如何找?)w14，
objPost.w14= objPost.w14+3;

這要如何 動態找?

並於最後，取出來。

主要是前端的grid (比如有10筆資料),要來統計各WXX的量，並比對 GRID 上有的值，檢查是否超量

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2024-08-13 15:54:51 檢舉

https://datatables.net/

noway iT邦研究生 1 級 ‧ 2024-08-13 20:47:32 檢舉

您好：
目前是已經有 grid 的資料了
要比對裡面的資料!
謝謝

froce iT邦大師 1 級 ‧ 2024-08-14 06:58:15 檢舉

你grid列個例子出來啊，要不然誰知道你grid是啥...

noway iT邦研究生 1 級 ‧ 2024-08-14 08:08:58 檢舉

您好：
不好意思，更新如上

froce iT邦大師 1 級 ‧ 2024-08-14 11:06:06 檢舉

你所謂的動態抓取是要拿來做什麼?要動態到什麼程度?你介面要怎麼設計?
你的grid的原始型態是不是一個array?每筆資料都是array [W14, 1 ,10]這樣?
這些都會影響到你這函式該怎麼設計。

如果只是要找數量超過，那在迴圈總計的時候就能做了，你上面的code也都寫了，我不太相信你寫不出來，應該是某些原因你還沒說

另外如果後端也是你寫，會建議後端就直接輸出合格的JSON，限制量另外弄一個JSON，不需要每筆都帶。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

Dexter

iT邦見習生 ‧ 2024-08-13 21:50:47

Object.keys(objPost)
Object.entries(objPost)

選一個用吧

不是很清楚你想要做什麼，但原始資料如果是json會單純一些

回應
分享
檢舉

登入發表回應

alien663

iT邦研究生 4 級 ‧ 2024-08-14 07:59:48

let data = [
    {
        "Type": "W14",
        "QTY": 1,
        "Limit": 10
    },
    {
        "Type": "W12",
        "QTY": 2,
        "Limit": 5
    },
    {
        "Type": "W14",
        "QTY": 3,
        "Limit": 10
    },
    {
        "Type": "W50",
        "QTY": 2,
        "Limit": 20
    },
    {
        "Type": "W14",
        "QTY": 8,
        "Limit": 10
    }
]

const validateLimit = (type) => {
    let total = 0;
    data.filter(item => item.Type === type)
        .forEach(item => {
            total += item.QTY
            if (total > item.Limit) console.log("Over Limit")
            else console.log(`${type} validate success`)
        })
}

validateLimit("W14")

回應
分享
檢舉

登入發表回應

lunzaizai0223

iT邦新手 5 級 ‧ 2024-08-14 10:40:09

const GRID = [
  { type: 'W14', qty: 1, limitQty: 10 },
  { type: 'W12', qty: 2, limitQty: 5 },
  { type: 'W14', qty: 3, limitQty: 10 },
  { type: 'W50', qty: 2, limitQty: 20 },
  { type: 'W14', qty: 8, limitQty: 10 },
]

function formatGridData (sourceGrid) {
  return sourceGrid.reduce((acc, item) => {
    const { type, qty, limitQty } = item
    if (acc[type]) {
      acc[type] += qty
    } else {
      acc[type] = qty
    }
    return acc
  }, {})
}

function validateTypeLimit (data, targetType) {
  const { qty, limitQty } = data[targetType]
  return qty <= limitQty
}

const formattedGridData = formatGridData(GRID)
const isGridTypeW14Validated = validateTypeLimit(formattedGridData, 'W14')

回應 3
分享
檢舉

noway iT邦研究生 1 級 ‧ 2024-08-15 12:01:28 檢舉

請問：
sourceGrid.reduce((acc, item) 這acc 與item 各代表什麼?

const { type, qty, limitQty } = item
這是指一個匿名物件，其值= item 嗎?

const { qty, limitQty } = data[targetType]
是一個匿名物件，期植是 data[targetType] 嗎?
謝謝

lunzaizai0223 iT邦新手 5 級 ‧ 2024-08-16 00:23:06 檢舉

抱歉，我發現我寫錯了，下列才是對的

const GRID = [
  { type: 'W14', qty: 1, limitQty: 10 },
  { type: 'W12', qty: 2, limitQty: 5 },
  { type: 'W14', qty: 3, limitQty: 10 },
  { type: 'W50', qty: 2, limitQty: 20 },
  { type: 'W14', qty: 8, limitQty: 10 },
]

// 原本的版本這裡少記錄 limitQty
function formatGridData (sourceGrid) {
  return sourceGrid.reduce((acc, item) => {
    const { type, qty, limitQty } = item
    if (acc[type]) {
      acc[type].qty += qty
    } else {
      acc[type] = {
        qty,
        limitQty
      }
    }
    
    return acc
  }, {})
}

function validateTypeLimit (data, targetType) {
  console.log(data)
  const { qty, limitQty } = data[targetType]
  return qty <= limitQty
}

const formattedGridData = formatGridData(GRID)
const isGridTypeW14Validated = validateTypeLimit(formattedGridData, 'W14')

lunzaizai0223 iT邦新手 5 級 ‧ 2024-08-16 00:28:55 檢舉

acc 是 Array.reduce 每次遍歷回傳的結果，用來記錄整理的物件；item 則是每次陣列遍歷的 element，就會是每筆 GRID 的資料。
const { type, qty, limitQty } = item 是解構，方便讀取 GRID 每筆資料的屬性（省去我 item.type, item.qty 及 item.limitQty）
這個函示負責收物件及 key，並且解構（省去 data[targetType].qty, data[targetType].limitQty）

登入發表回應

greenriver

iT邦研究生 5 級 ‧ 2024-08-21 09:04:42

class GridData{
    constructor(grid = []){
        this.grid = grid
        this.objPost = {}
    }
    getGridItem(item = {}){
        let { type, qty, limitQty } = item
        return { type: type || '', qty: qty || 0, limitQty: limitQty || 0 }
    }
    setObjPost(){
        this.grid.map(item=>{
            let { type, qty, limitQty } = item
            if(!type) return
            if(!this.objPost[type]) this.objPost[type] = qty //沒有,新增一筆
            else this.objPost[type] = this.objPost[type] + qty //有找到 (如何找?)
        })
    }
    addGridItem(item = {}){
        let newItem = this.getGridItem(item)
        let { type, qty, limitQty } = newItem
        if(!this.objPost[type]) this.objPost[type] = qty //沒有,新增一筆
        else this.objPost[type] = this.objPost[type] + qty //有找到 (如何找?)
        this.grid.push(newItem)
    }
} 

let grid = []
const gridData = new GridData(grid)
gridData.setObjPost()

大致這樣，剩下依照需求去修改