当数组在对象内部时循环对象和数组

Question

我正在使用查询来接收 JSON 响应。我想循环每个对象（VGF、SSR、BCV 等）并将它们输出到预制 div，然后这些对象中的数组将循环并在匹配的对象容器中创建 div。

这是我所拥有的缩短版本，它主要工作。 （希望我没有在这里搞砸）。

问题是我必须通过复制和粘贴每个对象（VGF、SSR、BCV 等）的整个函数来重复 searchresult 函数。我真的很想学习如何循环这个，而不是将相同的代码粘贴十几次。

如果我在这个问题上搞砸了或遗漏了什么，请告诉我，我会处理的。

这是我的 ajax 请求和 javascript。我知道我的问题在于这个循环。我试图在循环内做一个循环，等等。但是，当我这样做时，我根本没有得到任何结果。我很困惑，准备学习了。

$(function getData() {
  $("#searchbtn").click(function () {
    $.ajax({
      url: "action.php",
      type: "POST",
      data: {},
      dataType: "json",
      success: function (response) {
        console.log(response);
        searchresult(response);
      }
      });
  });
});

let searchresult = function(response) {
      let container = document.getElementById('VGFresults');
      let output = "";
      for (let j = 0; j < response.length; j++) {
            if (response[j].rcode == "VGF") {
               output +=
               `<div id="person${response[j].code}">
                <p>${response[j].firstname} ${response[j].lastname}</p>    
                </div>`
            }
      $(container).html(output);
      }
};

这是我的回复（与我目前收到的布局相同，但缩短了数组中的对象）。

response =
{"VGF":
   [{"code":"TU","rcode":"VGF","firstname":"Tom","lastname":"Riddle"},
    {"code":"AZ","rcode":"VGF","firstname":"Harry","lastname":"Potter"},
    {"code":"FR","rcode":"VGF","firstname":"Hermoine","lastname":"Granger"}],

"SSR":
   [{"code":"HG","rcode":"SSR","firstname":"Walt","lastname":"Disney"},
    {"code":"TR","rcode":"SSR","firstname":"H.R.","lastname":"Pickins"},
    {"code":"ED","rcode":"SSR","firstname":"Tom","lastname":"Ford"}],

"BCV":
   [{"code":"YH","rcode":"BCV","firstname":"Tom","lastname":"Clancy"},
    {"code":"RS","rcode":"BCV","firstname":"Robin","lastname":"Williams"},
    {"code":"AB","rcode":"BCV","firstname":"Brett","lastname":"Favre"}]}

这是 searchresult 函数正在使用的 HTML。目前，它运行良好。

为了澄清，我希望每个对象都在相应的 div 中插入其数组。例子： SSR 阵列将进入<div id="SSRresults"> BCV 数组将进入<div id="BCVresults">

从那里，每个数组将在每个数组的 *results div 中创建一个 div。

<div id="VGFresults">
  <div id="VGFheader">This is the VGF Header</div>
  <div id="VGFresults">The Javascript Creates Divs for each array here.</div>
</div>

<div id="SSRresults">
  <div id="SSRheader">This is the SSR Header</div>
  <div id="SSRresults">The Javascript Creates Divs for each array here.</div>
</div>

<div id="BCVresults">
  <div id="BCVheader">This is the BCV Header</div>
  <div id="BCVresults">The Javascript Creates Divs for each array here.</div>
</div>

谢谢，非常感谢任何帮助。

Answer 1

我会这样做：

我将响应声明为变量（但确保它适用于您的 ajax 响应。

var response =
{"VGF":
   [{"code":"TU","rcode":"VGF","firstname":"Tom","lastname":"Riddle"},
    {"code":"AZ","rcode":"VGF","firstname":"Harry","lastname":"Potter"},
    {"code":"FR","rcode":"VGF","firstname":"Hermoine","lastname":"Granger"}],

"SSR":
   [{"code":"HG","rcode":"SSR","firstname":"Walt","lastname":"Disney"},
    {"code":"TR","rcode":"SSR","firstname":"H.R.","lastname":"Pickins"},
    {"code":"ED","rcode":"SSR","firstname":"Tom","lastname":"Ford"}],

"BCV":
   [{"code":"YH","rcode":"BCV","firstname":"Tom","lastname":"Clancy"},
    {"code":"RS","rcode":"BCV","firstname":"Robin","lastname":"Williams"},
    {"code":"AB","rcode":"BCV","firstname":"Brett","lastname":"Favre"}]}



let searchresult = function(response) {
//          let container = document.getElementById('VGFresults');

      let output = "";
      for (var key in response) {
         // skip loop if the property is from prototype
            if (!response.hasOwnProperty(key)) continue;

            var obj = response[key];
            let container = document.getElementById(key+'results');
            for (var prop in obj) {
                // skip loop if the property is from prototype
                if (!obj.hasOwnProperty(prop)) continue;

                // your code
                //alert(prop + " = " + obj[prop]);
                console.log(obj[prop])
                 output += "<div id="+prop+"><p>"+obj[prop].firstname+" "+ obj[prop].lastname+"</p></div>"
            }
        }

             
      container.innerText = output;
      console.log(output);
};

<div id="VGFresults"></div>

现在可以处理每个属性VGF、SSR、BCV等。

编辑：根据用户的要求，我想您可以像这样编辑选择器： let container = document.getElementById(key+'results');