jQuery - 将 JSON 数组数据添加到 Div答案

【问题标题】：jQuery - Adding JSON Array Data to DivjQuery - 将 JSON 数组数据添加到 Div
【发布时间】：2019-12-16 12:13:42
【问题描述】：

我需要编写一个 jQuery，它将 JSON 数据直接附加到 HTML 中相应“div”旁边的“div”中。虽然实际数据更加庞大和复杂，但我为这个问题提供了一个简单的版本。

html如下：

<div class="Category">
            <div class="Sub-Category" id="Apple">
                <div id="Parameters"></div>
                <div id="Technicalities"></div>
            </div>
            <div class="Sub-Category" id="Samsung">
                <div id="Parameters"></div>
                <div id="Technicalities"></div>
            </div>
</div>

需要添加的JSON数据如下：

var StatJSON = {
            "Apple":{
                "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
                "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
            },
            "Samsung":{
                "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
                "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
            }
        }

我为此尝试过的 jQuery，但似乎搞砸了并且“无法破解：

$(document).ready(function (){
var StatJsonKeys = Object.keys(StatJSON);

jQuery('.Category .Sub-Category').each(function ($) {
            for (i=0; i<StatJsonKeys.length; i++){
                if (jQuery(this).text() == StatJsonKeys[i]) {
                    if (jQuery(this).children().each(function() {
                        for (j=0; j<StatJsonKeys.length; i++){
                            jQuery(this).attr('id') == StatJsonKeys[i].keys() {
                                jQuery(this).append('<div>' + StatJsonKeys[i].values() + '</div>')
                            }
                        }
                    }   
                }
            }
});

我还是个新手，尤其是处理 JSON，如果有任何帮助，我将不胜感激。谢谢！！

         $(document).ready(function (){

         var StatJSON = {
            "Apple":{
                "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
                "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
            },
            "Samsung":{
                "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
                "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
            }
        }

        var StatJsonKeys = Object.keys(StatJSON);

        jQuery('.Category .Sub-Category').each(function ($) {
            for (i=0; i<StatJsonKeys.length; i++){
                if (jQuery(this).text() == StatJsonKeys[i]) {
                    if (jQuery(this).children().each(function() {
                        for (j=0; j<StatJsonKeys.length; i++){
                            jQuery(this).attr('id') == StatJsonKeys[i].keys() {
                                jQuery(this).append('<div>' + StatJsonKeys[i].values() + '</div>')
                            }
                        }
                    }   
                }
            }
        
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<body>
        <div class="Category">
            <div class="Sub-Category" id="Apple">
                <div id="Parameters"></div>
                <div id="Technicalities"></div>
            </div>
            <div class="Sub-Category" id="Samsung">
                <div id="Parameters"></div>
                <div id="Technicalities"></div>
            </div>
        </div>
 </body>

【问题讨论】：

JSON is a textual, language-independent data-exchange format

标签： jquery arrays json

【解决方案1】：

您的 JavaScript 非常无效，例如

jQuery(this).attr('id') == StatJsonKeys[i].keys() { 看起来您想将 ID 更改为其他内容，然后运行某种函数...

这就是我认为你想要做的。

循环遍历对象，而不是 HTML - 我从 it is not JSON 重命名了对象 - 如果要循环 HTML，而不是对象，请参见第三个示例
使用匹配对象键的 jQuery 选择器
您必须有唯一的 ID，所以我将 div 的 ID 更改为 class

const stats = {
  "Apple": {
    "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
    "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
  },
  "Samsung": {
    "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
    "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
  }
}

$(function() {
  $.each(stats, (key, val) => {
    $("#"+key +" .Parameters").html(val["Parameters"]); // we COULD loop over the sub cat here 
    $("#"+key +" .Technicalities").html(val["Technicalities"]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<body>
  <div class="Category">
    <div class="Sub-Category" id="Apple">
      <div class="Parameters"></div>
      <div class="Technicalities"></div>
    </div>
    <div class="Sub-Category" id="Samsung">
      <div class="Parameters"></div>
      <div class="Technicalities"></div>
    </div>
  </div>
</body>

甚至可以没有 HTML，而是从对象生成必要的 HTML

const stats = {
  "Apple": {
    "Parameters": "Apple Parameter1-2000/Parameter2-5000/Parameter3-3000",
    "Technicalities": "Apple Technicality1-2000/Technicality2-5000/Technicality3-3000",
  },
  "Samsung": {
    "Parameters": "Samsung Parameter1-2000/Parameter2-5000/Parameter3-3000",
    "Technicalities": "Samsung Technicality1-2000/Technicality2-5000/Technicality3-3000",
  }
}

$(function() {
  const $cat = $("#category");
  $.each(stats, (key, val) => {
    let $subCat = $("<div/>",{"class":"subCategory","id":key})
    $.each(val, (key,val) => {
      $("<div/>",{"class":key}).html(val).appendTo($subCat);
    })
    $cat.append($subCat)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div id="category"></div>

最后一个例子，如果你的 HTML 比你的对象小，并且你想使用 HTML 而不是我在第一个例子中所做的访问密钥

const stats = {
  "Apple": {
    "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
    "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
  },
  "Samsung": {
    "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
    "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000",
  }
}

$(function() {
  $(".Sub-Category").each(function() {
    let item = stats[this.id]; // using the DIV ID to access the relevant object item
    $("div",this).each(function() { // the divs under "this" sub-category
      $(this).html(item[this.className]); // each div is now "this"
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<body>
  <div class="Category">
    <div class="Sub-Category" id="Apple">
      <div class="Parameters"></div>
      <div class="Technicalities"></div>
    </div>
    <div class="Sub-Category" id="Samsung">
      <div class="Parameters"></div>
      <div class="Technicalities"></div>
    </div>
  </div>
</body>

【讨论】：

感谢@mplungjan 的优雅回答和非常详细的回复！ :)
@MithunUchil 请参阅最后一个示例。它最接近您最初的问题，因为它使用您制作的 HTML 来访问对象，而不是相反

【解决方案2】：

请在下面找到我认为应该满足您要求的代码 -

var StatJSON = {
    "Apple": {
        "Parameters": "Parameter1-2000/Parameter2-5000/Parameter3-3000",
        "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000"
    },
    "Samsung": {
        "Parameters": "Parameter1-4000/Parameter2-10000/Parameter3-6000",
        "Technicalities": "Technicality1-2000/Technicality2-5000/Technicality3-3000"
    }
};

const $category = $("<div/>", {
    class: "Category" // used class because there can be multiple categories.
});

$.each(StatJSON, function(subCatName, subCatContent) {
    let $subCategory = $("<div/>", {
        class: "Sub-Category",
        id: subCatName
    });
  
    $.each(subCatContent, function(subCatStatName, subCatStatContent) {
        let $subCategoryStat = $("<div/>", {
    	    class: subCatStatName
        });
    
        $subCategoryStat
            .html(subCatStatContent)
            .appendTo($subCategory);
    });
  
    $subCategory.appendTo($category);
});

$("#result").html($category);

<div id="result"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

我给你做了一个sn-p。与我的任何一个相比，我都没有发现代码非常优雅......为什么在你使用 jQuery 时所有的 HTML 字符串？
感谢@harshadk258 快速简洁的回复！这两种方法都有效且非常有用！ :)
嗨！ @harshadk258。您能否帮助我了解如何提取 JSON 子标题“参数”和“技术”，例如您如何使用“StatJSON[v].Parameters”和“StatJSON[v].Technicalities”作为值。我试过 'StatJSON[k].Parameters' & 'StatJSON[k].Technicalities' 但这没有用。再次感谢！！ :)
@mplungjan 感谢您的编辑。我没有试图使代码优雅或遵守 jQuery 的概念。你的回答和评论真的帮助了我。感谢您的反馈。
嘿@MithunUchil 您能否详细说明在提取您提到的副标题时哪些内容不起作用？