从 json 获取数据，其中 JSON 键后缀随着 i 增加

Question

我将开发多项选择测验提交项目 我创建了一个表单，用户可以使用表单提交这些输入 测验标题、横幅、描述、quiz_category、quiz_language 等，包含 1 个问题和 4 个选项字段

我使用 Tailwind CSS、Node JS、Express JS 和 Java Script

var quizNo = 1;

addQuiz()

function addQuiz() {

  // Here i Will Store Quiz Option Input Box

  var h = document.getElementById("question");


  var quiz_container = '<div id="question_' + quizNo + '" > ' +
    ' <div class="flex flex-wrap" > ' +
    ' <div class="w-full lg:w-full px-4"> ' +
    ' <div class="relative w-full mb-3"> ' +
    ' <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2 py-3" htmlFor="grid-password"> ' +
    ' Quiz Question ' +
    ' </label> ' +
    '<input type="text" name="quiz_question_' + quizNo + '" ' +
    ' class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
    ' placeholder="Enter Quiz Question" /> ' +

    ' <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2 py-3" htmlFor="grid-password"> ' +
    ' Quiz Option ' +
    ' </label> ' +

    ' <div class="grid grid-cols-2 gap-2 my-4 mt-0"> ' +
    ' <div> ' +
    ' <input type="text" name="quiz_option_1_' + quizNo + '" ' +
    ' class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
    ' placeholder="Enter Option 1" /> ' +
    ' </div> ' +
    ' <div> ' +
    ' <input type="text" name="quiz_option_2_' + quizNo + '" ' +
    ' class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
    'placeholder="Enter Option 2" /> ' +
    '</div> ' +
    '</div> ' +
    '<div class="grid grid-cols-2 gap-2 my-4 mb-0"> ' +
    '<div> ' +
    '<input type="text" name="quiz_option_3_' + quizNo + '" ' +
    'class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
    'placeholder="Enter Option 3" /> ' +
    '</div>' +
    '<div> ' +
    '<input type="text" name="quiz_option_4_' + quizNo + '" ' +
    'class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
    'placeholder="Enter Option 4" /> ' +
    ' </div> ' +
    ' </div> ' +

    '</div>' +
    '</div>' +
    '</div > ' +
    '</div>';



  quizNo += 1;

  h.insertAdjacentHTML("afterend", quiz_container);

  document.getElementById("total_quiz").setAttribute("value", quizNo);


}

<input type="hidden" name="total_quiz" value="" id="total_quiz" />
<div id="question">

</div>

<input type="button" onclick="addQuiz()" value="Add Quiz" class="float-right  text-pink-500 bg-transparent border border-solid border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150">

提交表单后我得到这样的数据

我的 JSON 对象是

{
  quiz_title: 'Simple quiestion',
  quiz_desc: 'Enter Quiz Description Here',
  total_quiz : '4',
  quiz_question: 'question title 1',
  quiz_option_1: 'opt 1',
  quiz_option_2: 'opt 2',
  quiz_option_3: 'opt 3',
  quiz_option_4: 'opt 4',
  quiz_question_2: 'question title 3',
  quiz_option_1_2: 'opt 1',
  quiz_option_2_2: 'opt 2',
  quiz_option_3_2: 'opt 3',
  quiz_option_4_2: 'opt 4',
  quiz_question_1: 'question title 2',
  quiz_option_1_1: 'opt 1',
  quiz_option_2_1: 'opt 2',
  quiz_option_3_1: 'opt 3',
  quiz_option_4_1: 'opt 4',
  quiz_cat: 'basic_computer',
  quiz_lang: 'hindi',
  submit: 'Submit'
}

现在我想获得这样的架构

var quiz = [{
            id: i,
            question: question,
            option: [{
                    option_1: option_1,
                    option_2: option_2,
                    option_3: option_3,
                    option_4: option_4
            }],
            answer : (req.body.quiz_answer + "_" + i)
}];

我正在尝试这样的事情请帮助我

console.log(req.body);

        var total_quiz = req.body.total_quiz ;      

        var all_quiz;

        var question, option_1, option_2, option_3, option_4;
        for(var i = 1; i <= total_quiz - 1; i++) {

            question = req.body[quiz_question + "_" + i] 

            option_1 = req.body.quiz_option_1 + "_" + i;
            option_2 = req.body.quiz_option_2 + "_" + i;
            option_3 = req.body.quiz_option_3 + "_" + i;
            option_4 = req.body.quiz_option_4 + "_" + i;

            console.log(question, option_1, option_2, option_3, option_4);
            
            var quiz = [{
                id: i,
                question: question,
                option: [{
                    option_1: option_1,
                    option_2: option_2,
                    option_3: option_3,
                    option_4: option_4
                }],
                answer : (req.body.quiz_answer + "_" + i)
            }];

            console.log(quiz);
            all_quiz.push(quiz)
        }

基本上我是 JSON 项目的新手 并提前感谢您帮助我

Answer 1

您说您有描述的 JSON 对象，但您似乎正试图从名为 req.body 的变量中读取该数据，这不是我希望正常找到该数据的地方 - 但您没有显示我们把它放在那里的代码。因此，假设您的 req.body 变量实际上包含 JSON 输出，如图所示...

看起来你真的很亲密。您只需要稍微清理一下该代码。对于初学者，将 all_quiz 变量初始化为空数组：

var all_quiz = [];

然后，输入值的所有表达式都需要固定，如下所示：

question = req.body["quiz_question_" + i];
option_1 = req.body["quiz_option_1_" + i];
//  ... etc.

最后，您不需要将 quiz 变量的值设为数组 - 只需将其设为普通对象即可：

var quiz = {
    id: i,
    // ... etc.
};