how to refactor some code in success(data) to a function in script

user_8419972 0
Viewed 25

I have ajax to fetch some json data. And then, these data will be displayed on web page.

I find some code which is duplicated in success:function(data).

Now, I want to refactor part of code in success:function(data) to a function homPag(). But it is fail.

Here is the code, it works ok:

<script>
$(function() {
    $("#header").load("/header.html");
    $.ajax({
        url:'get_subnet_resourcebk.json',
        dataType:'json',
        type:'get',
        data:{},
        success:function(data) 
        {
          var dataL = data.list20.length+data.list19.length+data.list18.length;
          var pageNum = Math.ceil(dataL/10);
          var htmlC = "";
          htmlC +=  " <div class='newsLBox fL'>";
          htmlC +=  "ALL：";
          htmlC +=  dataL;
          htmlC +=  "pages";
          htmlC +=  " </div>";
          
          for (var i = 0; i < 5 ; i++)
          {
           var tit = data.list20[i].title;
           
           htmlC +=  "<div class='newsLBox fL'>";
           htmlC += tit;
           htmlC += "</div>";
         }
          
          $('#test').html(htmlC);
        }
    });
});
</script>

Here is the code, it works fail:

<script>
$(function() {
    $("#header").load("/header.html");
     alert("testxiexie");
     function homPag()({
       htmlC +=  " <div class='newsLBox fL'>";
          htmlC +=  " ALL：";
          htmlC +=  dataL;
          htmlC +=  "pages";
          htmlC +=  " </div>";
          
          for (var i = 0; i < 5 ; i++)
          {
           var tit = data.list20[i].title;
            
           htmlC +=  "<div class='newsLBox fL'>";
           htmlC +=  tit;
           htmlC += "</div>";
         }
     });
    $.ajax({
        url:'get_subnet_resourcebk.json',
        dataType:'json',
        type:'get',
        data:{},
        success:function(data) 
        {
          var dataL = data.list20.length+data.list19.length+data.list18.length;
          var pageNum = Math.ceil(dataL/10);
          var htmlC = "";
          
          homPag();  //it works wrong
          $('#test').html(htmlC);
        }
    });
</script>

My json get_subnet_resourcebk.json data is like:

{
"list20": [
      {
        "title":" 1. Robust Twin",
        "author":" Rui Wang* and Hu u*.",
        "journal": "Pett. 2019. 057205"
      }, 
      {
        "title":" 1. eyl Fermioides",
        "author":"Bowen Xia, Yuanjn, Baobing Zh.",
        "journal": "Phy9. 122 0505"
      } 
  ],
  "list19": [
       {
        "title":" 2. ermions in ",
        "author":"ia Chen, BaobXu*.",
        "journal": "Ph05"
       },
       {
        "title":" 2. Roberromagnetic Oxides",
        "author":"Bo Zheng, YXu*.",
        "journal": "Phy122 057205"
       },
       {
        "title":" 2. eyl Fermioc O",
        "author":"BowZhongjia Wang* and H*.",
        "journal": "Phys. 9. 122 057205"
      }
    ],
   "list18": [
     {    
        "title":" 3.  in Ferroic Oxides",
        "author":"Bao, Zhongjia Chen, Baoo, Rui Wau Xu*.",
        "journal": "Phys. Re057205"
     }
    ]
 }

who can give me a help?

ajax javascript
1 Answers

The problem is the scope of dataL and htmlC vars. Here:

<script>
$(function() {
     $("#header").load("/header.html");
     alert("testxiexie");
     function homPag(htmlC, dataL) {
          htmlC +=  " <div class='newsLBox fL'>";
          htmlC +=  " ALL：";
          htmlC +=  dataL;
          htmlC +=  "pages";
          htmlC +=  " </div>";
          
          for (var i = 0; i < 5 ; i++)
          {
           var tit = data.list20[i].title;
            
           htmlC +=  "<div class='newsLBox fL'>";
           htmlC +=  tit;
           htmlC += "</div>";
         }
         return htmlC
     };
    $.ajax({
        url:'get_subnet_resourcebk.json',
        dataType:'json',
        type:'get',
        data:{},
        success:function(data) 
        {
          var dataL = data.list20.length+data.list19.length+data.list18.length;
          var pageNum = Math.ceil(dataL/10);
          var htmlC = "";
          
          htmlC = homPag(htmlC, dataL);
          $('#test').html(htmlC);
        }
    });
</script>

here is a working example with the above code:

let json = {
  "list20": [{
      "title": " 1. Robust Twin",
      "author": " Rui Wang* and Hu u*.",
      "journal": "Pett. 2019. 057205"
    },
    {
      "title": " 1. eyl Fermioides",
      "author": "Bowen Xia, Yuanjn, Baobing Zh.",
      "journal": "Phy9. 122 0505"
    }
  ],
  "list19": [{
      "title": " 2. ermions in ",
      "author": "ia Chen, BaobXu*.",
      "journal": "Ph05"
    },
    {
      "title": " 2. Roberromagnetic Oxides",
      "author": "Bo Zheng, YXu*.",
      "journal": "Phy122 057205"
    },
    {
      "title": " 2. eyl Fermioc O",
      "author": "BowZhongjia Wang* and H*.",
      "journal": "Phys. 9. 122 057205"
    }
  ],
  "list18": [{
    "title": " 3.  in Ferroic Oxides",
    "author": "Bao, Zhongjia Chen, Baoo, Rui Wau Xu*.",
    "journal": "Phys. Re057205"
  }]
};

function homPag(data, dataL, htmlC) {
  htmlC += " <div class='newsLBox fL'>";
  htmlC += " ALL：";
  htmlC += dataL;
  htmlC += "pages";
  htmlC += " </div>";

  for (var i = 0; i <= 1; i++) { // 1 not 5. list20 has 2 items only
    var tit = data.list20[i].title;

    htmlC += "<div class='newsLBox fL'>";
    htmlC += tit;
    htmlC += "</div>";
  }
  return htmlC;
};

//$.ajax({
//  url: 'get_subnet_resourcebk.json',
//  dataType: 'json',
//  type: 'get',
//  data: {},
//  success: function(data) {
    var data = json; // simulate Ajax request
    var dataL = data.list20.length + data.list19.length + data.list18.length;
    var pageNum = Math.ceil(dataL / 10);
    var htmlC = "";

    htmlC = homPag(data, dataL, htmlC);
    $('#test').html(htmlC);
//  }
//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>

if what you want is to join all lists, you can do it like this:

let json = {
  "list20": [{
      "title": " 1. Robust Twin",
      "author": " Rui Wang* and Hu u*.",
      "journal": "Pett. 2019. 057205"
    },
    {
      "title": " 1. eyl Fermioides",
      "author": "Bowen Xia, Yuanjn, Baobing Zh.",
      "journal": "Phy9. 122 0505"
    }
  ],
  "list19": [{
      "title": " 2. ermions in ",
      "author": "ia Chen, BaobXu*.",
      "journal": "Ph05"
    },
    {
      "title": " 2. Roberromagnetic Oxides",
      "author": "Bo Zheng, YXu*.",
      "journal": "Phy122 057205"
    },
    {
      "title": " 2. eyl Fermioc O",
      "author": "BowZhongjia Wang* and H*.",
      "journal": "Phys. 9. 122 057205"
    }
  ],
  "list18": [{
    "title": " 3.  in Ferroic Oxides",
    "author": "Bao, Zhongjia Chen, Baoo, Rui Wau Xu*.",
    "journal": "Phys. Re057205"
  }]
};

function homPag(data, dataL, htmlC) {
  let lists = Object.keys(data);
  htmlC += " <div class='newsLBox fL'>";
  htmlC += " ALL：";
  htmlC += dataL;
  htmlC += "pages";
  htmlC += " </div>";

  lists.forEach(list=>{    
    htmlC += "<div class='newsLBox fL'>";
    htmlC += list;
    htmlC += "</div>";
    data[list].forEach(book=>{
      var tit = book.title;

      htmlC += "<div class='newsLBox fL'>";
      htmlC += tit;
      htmlC += "</div>";
    })
  })
  return htmlC;
};

//$.ajax({
//  url: 'get_subnet_resourcebk.json',
//  dataType: 'json',
//  type: 'get',
//  data: {},
//  success: function(data) {
    var data = json; // simulate Ajax request
    var dataL = data.list20.length + data.list19.length + data.list18.length;
    var pageNum = Math.ceil(dataL / 10);
    var htmlC = "";

    htmlC = homPag(data, dataL, htmlC);
    $('#test').html(htmlC);
//  }
//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>

user_27525200
Related