将来自多个对象的数据组合成 chartJS 可读的内容

Question

我有一些这样的数据（忽略它们都有相同的日期，它们通常会有不同的日期）：

[
    {
        "Raise Hand": 0,
        "Be Quiet": 1,
        "Ask For Help": 2,
        "Be Good": 3,
        "Comment": "four?",
        "date": "2022-03-05",
        "email": "me@example.com"
    },
    {
        "Raise Hand": 0,
        "Be Quiet": 1,
        "Ask For Help": 2,
        "Be Good": 3,
        "Comment": "four?",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 0,
        "Be Quiet": 1,
        "Ask For Help": 2,
        "Be Good": 3,
        "Comment": "four?",
        "date": "2022-03-05",
        "email": "me@example.com"
    },
    {
        "Raise Hand": 0,
        "Be Quiet": 1,
        "Ask For Help": 1,
        "Be Good": 1,
        "Comment": "a",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 0,
        "Be Quiet": 0,
        "Ask For Help": 0,
        "Be Good": 0,
        "Comment": "a",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 2,
        "Be Quiet": 2,
        "Ask For Help": 2,
        "Be Good": 2,
        "Comment": "asd",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 4,
        "Be Quiet": 4,
        "Ask For Help": 4,
        "Be Good": 4,
        "Comment": "asds",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 1,
        "Be Quiet": 2,
        "Ask For Help": 1,
        "Be Good": 0,
        "Comment": "asdsd",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 2,
        "Be Quiet": 1,
        "Ask For Help": 1,
        "Be Good": 3,
        "Comment": "asdsd",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 3,
        "Be Quiet": 2,
        "Ask For Help": 1,
        "Be Good": 2,
        "Comment": "ads",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 1,
        "Be Quiet": 2,
        "Ask For Help": 1,
        "Be Good": 1,
        "Comment": "asds",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    },
    {
        "Raise Hand": 3,
        "Be Quiet": 2,
        "Ask For Help": 1,
        "Be Good": 2,
        "Comment": "asds",
        "date": "2022-03-05",
        "email": "parent.email@email.orggg"
    }
]

我需要将数据格式化成这样的格式，每个 'challenge' 都有一个新数组。 X 是日期，Y 是那个特定日期 'challenge' 的值：

[{x:"2-22-22", y:2}, {x:"2-23-22", y:3}]

例如，它会有一个 'Raise Hand' 数组、一个 'Be Quiet' 数组等，但它也是动态的，因此我可以添加更多 'challenges' 或稍后替换它们。我也不需要删除日期、电子邮件和任何包含 'comment' 的内容。举手：

[{x:"2-22-22", y:0},{x:"2-23-22", y:0},{x:"2-24-22", y:1}, ect]

我为此花了几个小时，这是我取得的进展：

function formatData() {
        let labels = []
        let keys = []
        //* Get keys
        for(let i = 0; i < data.length; i++) {
            for(let j = 0; j < Object.keys(data[i]).length; j++) {
                if(keys.indexOf(Object.keys(data[i])[j]) == -1) {
                    keys.push(Object.keys(data[i])[j])
                } 
            }
        }
        keys = reduceKeys(keys)
        
        let totalData = {}
        //* Get data for each key
        for(let i = 0; i < data.length; i++) {
            for(let j = 0; j < keys.length; j++) {
                //* If data[i] DOES NOT have keys[j] then do this
                if(Object.keys(data[i]).indexOf(keys[j]) != -1) {
                    //* Make new key with array if it does not exist
                    if(Object.keys(totalData).indexOf(keys[j]) == -1) {
                        totalData[keys[j]] = []
                    }
                    totalData[keys[j]].push(data[i][keys[j]])
                } else {
                    //* Make new key with array if it does not exist
                    if(Object.keys(totalData).indexOf(keys[j]) == -1) {
                        totalData[keys[j]] = []
                    }
                    //* If the key does not exist for that entry the put 0
                    totalData[keys[j]].push(0)
                }
                if(data[i].date == null || data[i].date == undefined) {
                    labels.push("Error: No date")
                } else {
                    labels.push(data[i].date)
                }
            }
        }
        console.log(totalData)
        console.log(labels)
        let outputData = []
        for(let i = 0; i < labels.length; i++) {
            let tempArr = []
            for(let j = 0; j < Object.keys(totalData).length; j++) {
                // Object.keys(totalData)
                let length = totalData[Object.keys(totalData)[j]].length
                for(let k = 0; i < )
            }
        }
    }

    //* remove comments, date, and email
    function reduceKeys(keyArr) {
        let output = []
        for(let i = 0; i < keyArr.length; i++) {
            let key = keyArr[i]
            if(key.toLowerCase().includes("comment") || key.toLowerCase().includes("date") || key.toLowerCase().includes("email")) continue
            output.push(key)
        }
        return output
    }

有关我需要如何格式化数据的更多信息，请查看此 ChartJS docs page

Answer 1

您不需要手动解析。您可以使用像

这样的 ChartJs 解析器

const data = [{x: 'Jan', "Raise Hand": 100, "Be Quiet": 50, "Ask For Help": 50}, {x: 'Feb',  "Raise Hand": 100, "Be Quiet": 50, "Ask For Help": 50}];
const cfg = {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb'],
        datasets: [{
            label: 'Rise hand',
            data: data,
            parsing: {
                yAxisKey: "Raise Hand"
            }
        }, {
            label: 'Be Quiet',
            data: data,
            parsing: {
                yAxisKey: "Be Quiet"
            }
        }, {
            label: 'Help',
            data: data,
            parsing: {
                yAxisKey: "Ask For Help"
            }
        }]
    },
};

我从你分享的link中举了个例子:)

Answer 2

听起来最简单直接的方法是使用一个嵌套循环，在其中迭代除 Comment、date 和 email 之外的所有属性，推送到一个数组由正在迭代的属性标识，如果不存在则首先创建数组 - 然后在末尾获取数组结果对象的 Object.values。

const input = [
    {
        "Raise Hand": 0,
        "Be Quiet": 1,
        "Ask For Help": 2,
        "Be Good": 3,
        "Comment": "four?",
        "date": "2022-03-05",
        "email": "me@example.com"
    },
    {
        "Raise Hand": 0,
        "Be Quiet": 1,
        "Ask For Help": 2,
        "Be Good": 3,
        "Comment": "four?",
        "date": "2022-03-06",
        "email": "parent.email@email.orggg"
    },
];
const outputByExercise = {};
for (const item of input) {
  const { Comment, date, email, ...rest } = item;
  for (const [key, value] of Object.entries(rest)) {
    outputByExercise[key] ??= [];
    outputByExercise[key].push({ date, value });
  }
}
const output = Object.values(outputByExercise);
console.log(output);

将来自多个对象的数据组合成 chartJS 可读的内容

Combine data from multiple objects into something readable by chartJS

javascript

javascript-objects