Hiding First Column coming from JSON Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Hiding First Column coming from JSON without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am bringing the json data and binding on success call. So my json is as below

What I want is, I want to hide the first column which is APP_MST_ID and its value which is 1.0.

I bind the data in below format

success: function (data) {

  var html = '';

  if (data == "") {
    $("#dvTable").html('No Data Found');
  }

  else {
    var i = 0;

    var rData = JSON.parse(data);

    if (rData.length !== 0) {

      html += '<div class="table-responsive"><table class="table table-blue">';

      for (var key in rData) {

        var row = rData[key];

        if (key == 0) {
          html += '<tr>';
          for (var key2 in row) {
            html += '<th>';
            html += key2;
            html += '</th>';
          }
          html += '</tr>';
        }

        html += '<tr>';

        for (var key2 in row) {

          if (ddlSelectedVal == "Application") {
            if (i == 1) {
              html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
            }
            else {
              html += '<td>';
              html += row[key2];
            }
          }

          else if (ddlSelectedVal == "Services") {
            if (i == 1) {
              html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
            }
            else {
              html += '<td>';
              html += row[key2];
            }
          }

          else {
            html += '<td>';
            html += row[key2];
          }

          i++;

          html += '</td>';
        }

        i = 0;
        html += '</tr>';
      }
      html += '</table></div>';
    }

    else {
      html += "No Data Found";
    }

    $("#dvTable").html(html);
  }
}

So how could I hide the column and its value. Please suggest.

Answer

First option: Just dont include it on your loop.

Notice on header there is key2 != 'APP_MST_ID' to not include the <th>

And on the body, you can add else if (i != 0)

Note: make sure the APP_MST_ID is the first element of the object.

$(function() {
  var rData = [{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }];
  var html = "";
  var ddlSelectedVal = "Application";
  var i = 0;

  html += '<div class="table-responsive"><table class="table table-blue">';

  for (var key in rData) {

    var row = rData[key];

    if (key == 0) {
      html += '<tr>';
      for (var key2 in row) {
        if (key2 != 'APP_MST_ID') {
          html += '<th>';
          html += key2;
          html += '</th>';
        }
      }
      html += '</tr>';
    }

    html += '<tr>';

    for (var key2 in row) {

      if (ddlSelectedVal == "Application") {
        if (i == 1) {
          html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
        } else if (i != 0) {
          html += '<td>';
          html += row[key2];
        }
      } else if (ddlSelectedVal == "Services") {
        if (i == 1) {
          html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
        } else if (i != 0) {
          html += '<td>';
          html += row[key2];
        }
      } else {
        html += '<td>';
        html += row[key2];
      }

      i++;

      html += '</td>';
    }

    i = 0;
    html += '</tr>';
  }
  html += '</table></div>';

  $("#dvTable").html(html);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvTable"></div>

Second Option: Using jQuery hide after adding

$(function() {
  var rData = [{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }];
  var html = "";
  var ddlSelectedVal = "Application";
  var i = 0;

  html += '<div class="table-responsive"><table class="table table-blue">';

  for (var key in rData) {

    var row = rData[key];

    if (key == 0) {
      html += '<tr>';
      for (var key2 in row) {
        html += '<th>';
        html += key2;
        html += '</th>';
      }
      html += '</tr>';
    }

    html += '<tr>';

    for (var key2 in row) {

      if (ddlSelectedVal == "Application") {
        if (i == 1) {
          html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
        } else {
          html += '<td>';
          html += row[key2];
        }
      } else if (ddlSelectedVal == "Services") {
        if (i == 1) {
          html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
        } else {
          html += '<td>';
          html += row[key2];
        }
      } else {
        html += '<td>';
        html += row[key2];
      }

      i++;

      html += '</td>';
    }

    i = 0;
    html += '</tr>';
  }
  html += '</table></div>';

  $("#dvTable").html(html).promise().done(function() {
    var index = $("#dvTable table tr th:contains(APP_MST_ID)").index();
    $("#dvTable table tr th").eq(index).hide();
    $("#dvTable table tr td").eq(index).hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvTable"></div>
We are here to answer your question about Hiding First Column coming from JSON - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji