使用jQuery计算数组中的对象以更改进度条

Counting objects in array to change progress bar with jQuery

本文关键字：对象 计算 jQuery 数组 使用      更新时间：2023-09-26

我有一些样本数据，比如：

var data = {
    "section": {
        "1": {
            "question": [{
                "id": "1a",
                "num": "1",
                "title": "test"
            }, {
                "id": "1b",
                "num": "2",
                "title": "test"
            }]
        },
        "2": {
            "question": [{
                "id": "2a",
                "num": "1",
                "title": "test"
            }, {
                "id": "2b",
                "num": "2",
                "title": "test"
            }]
        }
    }
}

使用这个，我试图计算问题的数量。因此，对于这个数据样本，总共有4个问题。。。

计划使用以下数据更新进度表宽度：

<div id="progress"><div id="bar"></div></div>

以下是我开始编写的JS代码：

var number = 0, numQuestions, total, width;
function updateProgress() {
    number += 1;
    numQuestions = data.question;
    //total =
    width = total / number;
    $('#progress #bar').animate({'width':width});
}

要获得width，我想我需要将两个部分和问题加在一起，除以进度条的宽度，然后将进度的宽度设置为该数字的数字？？

有人能帮我指明正确的方向吗？

主要问题是：

  • numQuestions返回undefined，所以很明显我做错了
  • 我不知道怎么算出总数。。。这应该是根据numQuestions计算的#progress #bar宽度吗？或者完全是别的什么

我建议修改您的数据结构如下：

var data = {
    "sections": [ // sections is now an array instead of an object
        {
            "question": [{
                "id": "1a",
                "num": "1",
                "title": "test"
            }, {
                "id": "1b",
                "num": "2",
                "title": "test"
            }]
        },
        {
            "question": [{
                "id": "2a",
                "num": "1",
                "title": "test"
            }, {
                "id": "2b",
                "num": "2",
                "title": "test"
            }]
        }
    ]
}

除非您需要命名部分，否则无需为它们设置关键字。

然后你可以获取这样的部分数量：

var numSections = data.sections.length;

要获得所有部分的问题总数，您需要创建一个循环：

var numQuestions = 0;
for (var i = 0; i < data.sections.length; i++){
    var questions = data.sections[i].question;
    for (var j = 0; j < questions.length; j++){
        numQuestions++;
    }
}

然后，要更新进度条，您需要：

function updateProgress() {
    number++;
    width = number / numQuestions * 100;
    $('#progress #bar').animate({'width':width + '%'});
}

您希望#progress具有设置的宽度，#bar具有从0到100%的基于百分比的宽度。

如果你需要命名部分，你可以计算问题的数量，比如：

var numQuestions = 0;
for (var sect in data.section){
    var questions = data.section[sect].question;
    for (var j = 0; j < questions.length; j++){
        numQuestions++;
    }
}

你可以在这里看到所有这些工作：http://jsfiddle.net/wAGHS/1/

计数问题的答案

如果查看data对象，则不存在data.question。问题在section下，然后在1或2下（data.section.1.question和data.section.2.question）。

因此，从设置var到data.sections开始。循环浏览各部分，检查下面问题对象的大小，并将它们相加为一个变量。那么你就有了问题的总数。

现在进入下一部分：你总共有四个问题。进度应该显示什么？用户回答的问题数量或数量？

在object中，data.question是undefined，因为section对象的每个属性都有一个question属性，所以可以对它们进行计数。

var number = 0;
for (key in data.section) {
   number++
}

http://jsfiddle.net/KuJgN/

此函数确实计算数据对象中的"问题"：

function countquestions(obj) {
   var count = 0;
   for(var prop in obj) {
       if (obj.hasOwnProperty(prop)){
           for(var propp in obj[prop]) {
               if (obj[prop].hasOwnProperty(propp)){
                   ++count;
               }
           }
       }
   }
   return count;
}

它为上面的数据对象返回2，但你说它有4个问题，这让我很困惑，因为它只有两个"问题"对象。如果你把每个"问题"对象都算作两个，那么就把我函数的返回结果乘以二。

在updateProgress（）中，由于数据对象在键"question"处没有元素

data.question

将返回undefined。

假设：节必须是一个对象，并且问题必须是数组

进一步假设数据可以包含多个"部分"，要获得数据中的问题总数，请尝试：

var total_questions=0;
Object.keys(data).forEach(function(k){
    Object.keys(data[k]).forEach(function(num){
        total_questions+=data[k][num]['question'] 
            ? data[k][num]['question'].length 
            : 0;
    })
});

如果数据只包含一个部分，则上述内容可以简化为：

var total_questions=0;
Object.keys(data.section).forEach(function(num){
    total_questions+=data.section[num]['question'] 
        ? data.section[num]['question'].length 
        : 0
});
相关文章：