iT邦幫忙

0

JS 如何動態 抓取object內容

  • 分享至 

  • xImage

您好:

有資料類似
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 }} |
{{ formatDate(item.duration) }}
直播中
0
Dexter
iT邦見習生 ‧ 2024-08-13 21:50:47
Object.keys(objPost)
Object.entries(objPost)

選一個用吧

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

0
alien663
iT邦研究生 3 級 ‧ 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")
0
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')
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] 嗎?
謝謝

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

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')
  1. acc 是 Array.reduce 每次遍歷回傳的結果,用來記錄整理的物件;item 則是每次陣列遍歷的 element,就會是每筆 GRID 的資料。
  2. const { type, qty, limitQty } = item 是解構,方便讀取 GRID 每筆資料的屬性(省去我 item.type, item.qtyitem.limitQty
  3. 這個函示負責收物件及 key,並且解構(省去 data[targetType].qty, data[targetType].limitQty
0
greenriver
iT邦研究生 4 級 ‧ 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()

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

我要發表回答

立即登入回答