【问题标题】:How to handle Null value from API Response in Vue Js如何在 Vue Js 中处理来自 API 响应的 Null 值
【发布时间】:2018-06-06 21:46:17
【问题描述】:

我试图展示从 API 获得的价值。我正在尝试在模板中显示 question_section 名称。我多次获得这些值意味着 json 中的 Array 对象。所以有一次我得到了 question_section 的价值,比如“A: ABC Xyz”,但接下来的 5 次 null 价值又一次" B: DEF pqr" 和 5 次 null 值。

所以当我试图在我的模板中显示它时,会得到 undefinednull。 我使用 JSON.stringfy(value1.question_section) 然后为空,因为所有值都是空的。在这里我注意到它正在打印最后一个索引(第 4 个索引)的值,但它应该打印零索引。

我的 Vue js 代码

    $.each(this.questionPaperAll, function( key, value) {

        $.each(value.questions, function( key1, value1) {

           if( JSON.stringify( value1.question_section) )
          {
             title = "<div style='font-weight: bold;padding-bottom: 10px'>"

              + JSON.stringify( value1.question_section)  +" &nbsp;" + 

                  value1.section_marks + "</div>\n" +

                 "<div style='font-weight: bold;padding-bottom: 10px'>" + 

                  s_no + ") " + value1.question_type_name[0].name + "

                  </div>\n" 
                   }     
                        });
              });

我的 API Json 响应 :: 我无法在此处显示完整响应,这只是我遇到问题的示例..

     [ {
            "question_type_name": "4",
            "questions": [
                {
                    "question_ref_id": "DndoURx54fj7HaSF",
                    "question_section": "A : Attempt All question.",
                    "section_marks": "10", 
                    "question_name": "economics Question 122",
                },
                {
                    "question_ref_id": "8wFqcPBVruJSvYKv",
                    "question_section": "",
                    "section_marks": "10",
                    "question_name": "economics Question 127",

                },
                {
                    "question_ref_id": "VU4xhxMYO5pdGkNM",
                    "question_section": "",
                    "section_marks": "10",   
                    "question_name": "economics Question 128",
                },
               {
                    "question_ref_id": "VU4xhxMYO5pdGkNM",
                    "question_section": "",
                    "section_marks": "10",   
                    "question_name": "economics Question 128",
                },
                 {
                    "question_ref_id": "VU4xhxMYO5pdGkNM",
                    "question_section": "",
                    "section_marks": "10",   
                    "question_name": "economics Question 128",
                }
            ]
        },
        {
            "question_type_name": "1",
            "questions": [
                {
                    "question_ref_id": "e0NGIyFmsQ5EEKiX",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 333",   
                },
                {
                    "question_ref_id": "e0NGIyFmsQ5EEKiX",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 333",   
                },
                {
                    "question_ref_id": "e0NGIyFmsQ5EEKiX",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 333",   
                },
             {
                    "question_ref_id": "e0NGIyFmsQ5EEKiX",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 333",   
                },
               {
                    "question_ref_id": "e0NGIyFmsQ5EEKiX",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 333",   
                },
            ]
        },
        {
            "question_type_name": "3",
            "questions": [
                {
                    "question_ref_id": "oALoJ2nCzQm2EBbA",
                    "question_section": "B : Attempt Only 5 Question from each Question.",
                    "section_marks": "20",
                    "question_name": "economics Question 11w",
                    "marks": "1",
                },
                {
                    "question_ref_id": "YUrzwnrW2o0nXMD8",
                    "question_section": "",
                    "section_marks": "20",
                    "question_name": "economics Question 12l",
                    "marks": "1",
                },
                   {
                    "question_ref_id": "YUrzwnrW2o0nXMD8",
                    "question_section": "",
                    "section_marks": "20",
                    "question_name": "economics Question 12l",
                    "marks": "1",
                },
                {
                    "question_ref_id": "YUrzwnrW2o0nXMD8",
                    "question_section": "",
                    "section_marks": "20",
                    "question_name": "economics Question 12l",
                    "marks": "1",
                },
               {
                    "question_ref_id": "YUrzwnrW2o0nXMD8",
                    "question_section": "",
                    "section_marks": "20",
                    "question_name": "economics Question 12l",
                    "marks": "1",
                },
                  {
                    "question_ref_id": "YUrzwnrW2o0nXMD8",
                    "question_section": "",
                    "section_marks": "20",
                    "question_name": "economics Question 12l",
                    "marks": "1",
                }
            ]
        },
        {
            "question_type_name": "2",
            "questions": [
                {
                    "question_ref_id": "KztHaRUnRCLZwx8U",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 5",
                    "marks": "1",
                },
                {
                    "question_ref_id": "KztHaRUnRCLZwx8U",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 5",
                    "marks": "1",
                },
                {
                    "question_ref_id": "KztHaRUnRCLZwx8U",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 5",
                    "marks": "1",
                },
                {
                    "question_ref_id": "KztHaRUnRCLZwx8U",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 5",
                    "marks": "1",
                },
                {
                    "question_ref_id": "KztHaRUnRCLZwx8U",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 5",
                    "marks": "1",
                },
                                  {
                    "question_ref_id": "KztHaRUnRCLZwx8U",
                    "question_section": "",
                    "section_marks": null,
                    "question_name": "economics Question 5",
                    "marks": "1",
                },
            ]
        }]

这是理解问题的示例响应。您可以看到该数组的值。其中数组 questions 具有键 question_section ,该键值第一次出现某个字符串,但在新部分未出现之前全部为空。所以我想只显示那些 question_section 的值有和休息避免意味着不显示。为此,我使用了 if 条件,但它现在可以工作了。为什么我不知道?所以请更正可能的代码。还要解释发生了什么问题。

我还想告诉你,当我尝试检查 questions 数组的哪个索引正在打印时。我看到索引 4 是第一个数组的最后一个索引。为什么最后打印。

questionPaperAll 是我从服务器获取时保存 API 响应的数组。

【问题讨论】:

  • 它的输出将显示在 ck-editor 上。

标签: json stringify


【解决方案1】:

如果您使用Vue,那么您不应该在 JavaScript 中构造 HTML 字符串 - 这就是模板的用途。

您的问题似乎是您有一个返回误报的if 语句。

对空字符串调用JSON.stringify 会返回一个由两个双引号组成的字符串""。您可以尝试在控制台中运行以下命令,您会看到结果是 2:console.log(JSON.stringify('').length);

无需致电JSON.stringify。您可以简单地依赖空字符串的falsiness

if (value1.question_section) {
    /* TODO: Conditional code goes here. */
}

我会敦促您编辑您的问题,以便清楚这是关于使用 JSON.stringify不是关于 Vue.js。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-03-30
    • 2021-10-14
    • 2021-03-26
    • 1970-01-01
    • 2019-04-25
    • 1970-01-01
    • 2013-08-27
    • 2015-01-26
    相关资源
    最近更新 更多