搜索
搜索

需要一个数组来存储具有相同属性的不同对象的不同数据（或其他有意义的策略）

Craig5117 发表于 Dev
72
克雷格5117

我对这一切都是新手，所以如果我错过了明显的事情，请原谅我。我正在构建一种工具，该工具应该跟踪针对特定目标，针对特定学生的评估数据。我使用JavaScript和jQuery构建了一个函数，该函数执行以下操作：1.初始化新学生的数组（currentStudentArray）。2.对于每个目标，初始化一个数组以保存评估数据（newEvalArray），获取目标名称，然后进行每次评估。3.对于每个评估，它都会获得日期，分数和分数百分比；它将评估数据打包到一个对象中，然后将对象发送到保存评估数据的数组（newEvalArray）。4.回到每个目标级别：将目标名称和评估数组打包到一个对象中，将该对象发送到currentStudentArray。5.最后，学生

问题是我的newEvalArray不会在每个目标周期都重新启动，而是将上一个目标的所有评估与下一个目标的评估堆叠在一起，然后存储这两个目标的所有评估。我想做的只是将针对该目标的评估存储在该目标下。我对应用程序的了解还不够，无法测试currentStudentsArray发生了什么，但是我怀疑一旦我有多个目标不同的学生，它将遇到同样的问题。但是我还没有达到这个水平。现在，我只想弄清楚newEvalArray发生了什么。预期的输出：控制台应记录两个评估数组（每个目标一个），其长度为4（基于我目前在HTML中的占位符）。而是记录长度为8的数组，它们包含每个目标的所有评估。这是该函数的代码：

var currentStudent = "Steve";
var studentsGoalsArray = [];
var studentGoalUpdate = function () {
    var currentStudentArray = [];
    $(".goal").each(function(){
        var newEvalArray = [];
        var goalName = $(this).children("h2").text();
        console.log("Goal name is: " + goalName);
        $(".goal-eval").each(function(){
            var evalDate = $(this).children("p").text();
            console.log("EvalDate is: " + evalDate);
            var scoreContainerEl = $(this).children("div");
            var scoreContainerChildren = scoreContainerEl.children();           
            var evalScore = scoreContainerChildren[0].textContent;
            console.log("EvalScore is: " + evalScore);
            var scorePercent = scoreContainerChildren[1].textContent;
            console.log("ScorePercent is: " + scorePercent);
            console.log(evalDate, evalScore, scorePercent);
            var evalObj = {date: evalDate, score: evalScore, percent: scorePercent};
            console.log(evalObj);
            newEvalArray.push(evalObj);
            console.log(newEvalArray);
        });
    
        var goalDataObj = {goal: goalName, eval: newEvalArray}
        currentStudentArray.push(goalDataObj);
        console.log(currentStudentArray);
    });
    studUpdateArrayData = {student: currentStudent, data: currentStudentArray}
    studentsGoalsArray.push(studUpdateArrayData);
    console.log(studentsGoalsArray);
};

$("#newEvalBtn").on("click", studentGoalUpdate);
 <div class="col" id="goals-wrapper">
            
            <!--Goals displayed here-->
            <div class="col bg-light d-flex justify-content-between flex-wrap border-top-0" id="goals-container">
                
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">Yes/No</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">3/10</p> <p class="scorePercent border-bottom">30%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/15/20202</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">5/10</p> <p class="border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">6/10</p> <p class="border-bottom">60%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>1/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">9/10</p> <p class="border-bottom">90%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">When</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">5/10</p> <p class="scorePercent border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">7/10</p> <p class="border-bottom">70%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">8/10</p> <p class="border-bottom">80%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>01/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">10/10</p> <p class="border-bottom">100%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                 
                    
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

加布里埃莱·彼得里奥利（Gabriele Petrioli）

您的newEvalArray重置很好，但是您用所有目标评估来填补它。

发生这种情况是因为您使用$(".goal-eval").each来查找.goal-eval页面中的所有节点，而不仅仅是当前节点下的所有节点.goal。

您需要添加正确的上下文以限制搜索。由于该行位于$(".goal").each处理程序内部，因此您可以将其this作为第二个参数。

因此，使用(".goal-eval", this).each应该可以解决您的问题。

var currentStudent = "Steve";
var studentsGoalsArray = [];
var studentGoalUpdate = function () {
    var currentStudentArray = [];
    $(".goal").each(function(){
        var newEvalArray = [];
        var goalName = $(this).children("h2").text();
        $(".goal-eval", this).each(function(){
            var evalDate = $(this).children("p").text();
            var scoreContainerEl = $(this).children("div");
            var scoreContainerChildren = scoreContainerEl.children();           
            var evalScore = scoreContainerChildren[0].textContent;
            var scorePercent = scoreContainerChildren[1].textContent;
            var evalObj = {date: evalDate, score: evalScore, percent: scorePercent};
            newEvalArray.push(evalObj);
        });
    
        var goalDataObj = {goal: goalName, eval: newEvalArray}
        currentStudentArray.push(goalDataObj);
    });
    studUpdateArrayData = {student: currentStudent, data: currentStudentArray}
    studentsGoalsArray.push(studUpdateArrayData);
    console.log(studentsGoalsArray);
};

$("#newEvalBtn").on("click", studentGoalUpdate);
<div class="col" id="goals-wrapper">
            
            <!--Goals displayed here-->
            <div class="col bg-light d-flex justify-content-between flex-wrap border-top-0" id="goals-container">
                
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">Yes/No</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">3/10</p> <p class="scorePercent border-bottom">30%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/15/20202</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">5/10</p> <p class="border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">6/10</p> <p class="border-bottom">60%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>1/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">9/10</p> <p class="border-bottom">90%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">When</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">5/10</p> <p class="scorePercent border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">7/10</p> <p class="border-bottom">70%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">8/10</p> <p class="border-bottom">80%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>01/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">10/10</p> <p class="border-bottom">100%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                 
                    
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

更新具有相同属性的不同对象

在具有相同属性的两个不同对象上使用equal（）方法

即使仅使用一个持久性存储，使用不同的CoreData配置来提高性能/减少存储是否有意义？

Javscript从具有相同属性，具有相同键和添加量的不同对象创建公共对象

一个接口中具有不同方法和属性的不同对象

在一个对象数组中结合两个不同对象数组的不同属性

具有相同属性值的不同对象可以在Java中具有相同的哈希码吗

如何从一个数组中获得具有其他属性的对象？

使用具有相同条件变量的不同互斥体是否有意义？

如何将一组对象映射到 Redux Slice 中的不同对象（具有不同属性）？

将具有相同属性的对象数组转换为具有数组值的一个对象

从一个类创建具有不同属性的对象-JAVA

基于具有不同属性的一个类调用对象

如何将一组对象（不同长度）转换为一个与原始数组中的元素具有不同属性的对象？

在javascript中从具有不同属性的2个数组中获取不同的元素

创建一个NSSet数组，该数组具有另一个NSArray中存在的对象的不同属性的值

NewtonSoft 反序列化来自具有不同属性名称的多个源的相同对象

将具有不同对象类型的两个不同数组合并为一个

具有不同值的相同对象属性

在对象数组中查找具有相同属性的元素并创建一个新的对象数组

5个具有相同值的不同对象

创建一个函数，该函数接受具有相同方法的两个不同对象

函数应该将具有相同属性的项目返回到一个数组中

NodeJS / Javascript在不同数组中查找具有相同属性的对象

将具有相同属性的对象连接到不同数组中

递归过滤具有不同属性的对象数组

筛选具有不同属性的对象数组

如何编写一个有意义的测试来扩展类？

将两个数据集合并为一个，并获得具有相同属性的列的均值

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档