JavaScript: Объединение подобных функций

Question

У меня есть несколько функций, которые делают одно и то же снова и снова, но с другими объектными данными, переданными из внешнего файла JSON. Эти данные называются Data1, Data2 и Data3, которые я объявил их как переменные Data1_Data, Data2_Data и Data3_Data.

Мне интересно, как я могу объединить эти функции, чтобы я мог написать одну функцию, которая проходит в соответствующих объектах данных JSON.

Фоновая информация. Таким образом, функции проходят через внешний набор данных JSON (огромная сумма) и отображает n-ю информацию в назначенные идентификаторы. Каждая функция в настоящее время назначается конкретному объекту данных в файле JSON, как в примере: Data1, Data2 и Data3.

JSfiddle можно найти здесь https://jsfiddle.net/3mL0d6Lb/

<div class="Dboxes"> 
<span class="Title"> Data1/Data2 </span> 
    <div class="TableContainer"> 
     <div class="Value"> 
      <span id="Data1" class="metrics">##</span> 
     </div> 
    </div> 
    <div class="TableContainer"> 
     <div class="Value"> 
     <span id="Data2" class="metrics">##</span> 
     </div> 
    </div> 
    <div class="TableContainer"> 
     <div class="Value"> 
     <span id="Data3" class="metrics">##</span> 
     </div> 
    </div> 

.Dboxes { 
      width: 140px; 
      height: 140px; 
      background: linear-gradient(#00395c 0%, #000000 50%, #00395c 100%); 
      padding-top: 2px; 
      padding-left: 2px; 
      display: inline-block; 
      margin: 0px 0px 1px 0px; 
      position:relative; 
      color: white; 
     } 

.Value 
{ 
    text-align: center; 
    font-size: 1.0vw; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 


.TableContainer 
{ 
    display: flex; 
    align-items:center; 
    height: 25px; 
} 
.TitleImage 
{ 
    width: 24px; 
    height: 24px; 
    margin-left: 5%; 
} 
.container { 
    height: 100%; 
    width: 100%; 
    display: inline-block; 
} 

JavaScripts

// Setting up the Json 
var counter = 0; // Trial 
var previous_value = null; 

$(document).ready(function() {  

    $.ajaxSetup({ cache: false }); 

     myJson(); 

    }); 

// Below is the function to draw data from Json   
function myJson() { 

    $.getJSON("Dataset.json", function (response) { 

     var i = 1380; //start demo at last hour of data. 

     var looping = setInterval(function() { 
     var TrialCount = response.length; 
      var Info = response[counter]; 
      var Data1_Data = Info.Data1; 
      var Data2_Data = Info.Data2; 
     var Data3_Data = Info.Data3; 

      CompareData1(); 
      CompareData2(); 
     CompareData3(); 

      function CompareData1() { 
       if (counter == 0) { 
        prev_Data1_Data = Data1_Data; 
       } 
       if (Data1_Data > prev_Data1_Data) { 
        if ((Math.abs(Data1_Data - prev_Data1_Data) >= prev_Data1_Data/2)) 
        document.getElementById("Data1_img").src = "img/yeltri.png"; 
        else if ((Math.abs(Data1_Data - prev_Data1_Data) <= prev_Data1_Data/2)) 
         document.getElementById("Data1_img").src = "img/grnsqr.png"; 
       } 
       else if (Data1_Data < prev_Data1_Data) { 
        if ((Math.abs(Data1_Data - prev_Data1_Data) >= prev_Data1_Data/2)) 
        document.getElementById("Data1_img").src = "img/yeltriDn.png"; 
        else if ((Math.abs(Data1_Data - prev_Data1_Data) <= prev_Data1_Data/2)) 
         document.getElementById("Data1_img").src = "img/grnsqr.png"; 
       } 
       prev_Data1_Data = Data1_Data; 
      } 

      function CompareData2() { 
       if (counter == 0) { 
        prev_Data2_Data = Data2_Data; 
       } 
       if (Data2_Data > prev_Data2_Data) { 
        if ((Math.abs(Data2_Data - prev_Data2_Data) >= prev_Data2_Data/2)) 
        document.getElementById("Data2_img").src = "img/yeltri.png"; 
        else if ((Math.abs(Data2_Data - prev_Data2_Data) <= prev_Data2_Data/2)) 
         document.getElementById("Data2_img").src = "img/grnsqr.png"; 
       } 
       else if (Data2_Data < prev_Data2_Data) { 
        if ((Math.abs(Data2_Data - prev_Data2_Data) >= prev_Data2_Data/2)) 
        document.getElementById("Data2_img").src = "img/yeltriDn.png"; 
        else if ((Math.abs(Data2_Data - prev_Data2_Data) <= prev_Data2_Data/2)) 
         document.getElementById("Data2_img").src = "img/grnsqr.png"; 
       } 

       prev_Data2_Data = Data2_Data; 
      } 

     function CompareData3() { 
       if (counter == 0) { 
        prev_Data3_Data = Data3_Data; 
       } 
       if (Data3_Data > prev_Data3_Data) { 
        if ((Math.abs(Data3_Data - prev_Data3_Data) >= prev_Data3_Data/2)) 
        document.getElementById("Data3_img").src = "img/yeltri.png"; 
        else if ((Math.abs(Data3_Data - prev_Data3_Data) <= prev_Data3_Data/2)) 
         document.getElementById("Data3_img").src = "img/grnsqr.png"; 
       } 
       else if (Data3_Data < prev_Data3_Data) { 
        if ((Math.abs(Data3_Data - prev_Data3_Data) >= prev_Data3_Data/2)) 
        document.getElementById("Data3_img").src = "img/yeltriDn.png"; 
        else if ((Math.abs(Data3_Data - prev_Data3_Data) <= prev_Data3_Data/2)) 
         document.getElementById("Data3_img").src = "img/grnsqr.png"; 
       } 

       prev_Data3_Data = Data3_Data; 
      } 

      document.getElementById("Data1").innerHTML = Data1_Data 
      document.getElementById("Data2").innerHTML = Data2_Data 
      document.getElementById("Data3").innerHTML = Data3_Data 

      counter++; 
      if (counter == TrialCount) clearInterval(looping); 

     }, 100); 
    }); 
}; 

Answer 1

Вы можете использовать for each function на вашем Info объекта Переберите свойства в нем, а не использовать его индивидуально.

CompareData(Info); 

for(data in Info){ 
    if (Info.hasOwnProperty(data)) { 
     CompareData(data, info[data]); 
    } 
} 

function CompareData(data, data_value){ 
    // Modify your code here 
} 

Причина, почему я оставил комментарий на функцию CompareData, потому что, как вы используете следующие переменные: Data_#_Data и prev_Data#_Data, где # означает 1, 2 или 3, позвольте мне остановиться ...

Я считаю, что вы можете заменить использование этих переменных с помощью data_value, а именно info[data]. Поэтому, перейдя с кодом, который я предоставил, внутри функции CompareData мы можем использовать переданное в объекте свойство data, которое теперь называется data для простоты, чтобы определить, с какими данными (1, 2 или 3) мы имеем дело.

Я также передал значение этого свойства через info[data], так что нам не нужно беспокоиться об этом внутри самой функции ... вы можете изменить это в любое время.

Итак, теперь у вас есть соответствующая информация в функции, все, что вам нужно сделать, это простая проверка: if(data === "Data1"), чтобы проверить, с какими данными вы имеете дело. Реализация его будет что-то вроде этого:

if(data === "Data1"){ 
    // ... some code before 
    document.getElementById("Data1_img").src = "img/grnsqr.png"; 
    // ... some code after 
} 

Это позволит вам использовать специальный код связывал с каждым свойством, не дублируя окружающий код, который является точкой вашего беспокойства. Если вы посмотрите на код ниже, это пример того, что вы можете сделать с этой реализацией ... но имейте в виду, что я не пишу весь код для вас, потому что я оставляю окончательную реализацию до вас и ваших собственных стиль кодирования.

function CompareData(data, data_value){ 
    var prev_data = 0; 

    if (counter == 0) { 
     prev_data = data_value; 
    } 

    if (data_value > prev_data) { 
     if ((Math.abs(data_value - prev_data) >= prev_data/2)) 
      if(data === "Data1"){ 
       document.getElementById("Data1_img").src = "img/yeltri.png"; 
      } 
      else if(data === "Data2"){ 
       document.getElementById("Data1_img").src = "img/yeltri.png"; 
      } 
      // ... Etcetera.... 
     } 
    } 
} 

Если у вас есть вопросы, задайте вопросы в комментариях ниже. Если код работает, и вы хотите его оптимизировать, я настоятельно рекомендую отправить Code Review и разместите там свой код.