"Can we apply a filter to the JSON file when it is

Question

"Can we apply a filter to the JSON file when it is

I encountered an issue while trying to filter json data based on user selection. The debugger console displayed the error message:

TypeError: obj.contacts.filter is not a function

. I have included a snippet of my code below:

var contactStorage = {};
$("#frm_find").on("submit", findContacts);

function findContacts(e) {
  e.preventDefault();
  var frmFilter = $("#frm_filterby").val();

  if (frmFilter) {
    $.ajax({
      type: "GET",
      url: "https://api.myjson.com/bins/9j7qg?" + new Date().getTime(),
      dataType: "json"
    }).done(function(obj) {
      contactStorage = obj.contacts.filter(function(entry) {
        switch (frmFilter) {
          case '1':
            return entry.status === 1;
            break;
          case '2':
            return entry.status === 0;
            break;
          default:
            return entry;
        }
      });
      console.log(contactStorage);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert('Error: ' + errorThrown);
    });
  }
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frm_find" id="frm_find" autocomplete="off">
  <div class="row find-row">
    <div class="form-group col-xs-12 ... 
                                </button>
    </div>
  </div>
</form>

If you have any insights on resolving this issue, please share your knowledge. Thank you.

javascript json filter

Answer 1

Answer №1

contacts is actually an object, not an array:

contacts:{1: {id: 1, first: "Mike", last: "Johnson", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09d9a9f989e839f9eb0979d91999cde939f9d">[email protected]</a>", phone: "(203) 567-9055",…},…}

If you wish to utilize the filter method, it needs to be converted into an array first. One way to do this is through Object.values:

var contactStorage = {};
$("#frm_find").on("submit", findContacts);

function findContacts(e) {
  e.preventDefault();
  var frmFilter = $("#frm_filterby").val();

  if (frmFilter) {
    $.ajax({
      type: "GET",
      url: "https://api.myjson.com/bins/9j7qg?" + new Date().getTime(),
      dataType: "json"
    }).done(function(obj) {
      contactStorage = Object.values(obj.contacts).filter(function(entry) {
        switch (frmFilter) {
          case '1':
            return entry.status === 1;
            break;
          case '2':
            return entry.status === 0;
            break;
          default:
            return entry;
        }
      });
      console.log(contactStorage);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert('Error: ' + errorThrown);
    });
  }
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frm_find" id="frm_find" autocomplete="off">
  <div class="row find-row">
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <select class="form-control" name="frm_filterby" id="frm_filterby" required>
        <option value="">--Choose--</option>
        <option value="1">Active</option>
        <option value="2">Inactive</option>
        <option value="3">Show All</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <button class="btn btn-block btn-primary" name="frm_search" id="frm_search">
                                        <span class="glyphicon glyphicon-search"></span> Search
                                    </button>
    </div>
  </div>
</form>

If you intend to transform the filtered array back into an object of some sort, you can use the spread operator:

contactStorage = { ...contactStorage};

Answer 2

contacts is actually an object, not an array:

contacts:{1: {id: 1, first: "Mike", last: "Johnson", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09d9a9f989e839f9eb0979d91999cde939f9d">[email protected]</a>", phone: "(203) 567-9055",…},…}

If you wish to utilize the filter method, it needs to be converted into an array first. One way to do this is through Object.values:

var contactStorage = {};
$("#frm_find").on("submit", findContacts);

function findContacts(e) {
  e.preventDefault();
  var frmFilter = $("#frm_filterby").val();

  if (frmFilter) {
    $.ajax({
      type: "GET",
      url: "https://api.myjson.com/bins/9j7qg?" + new Date().getTime(),
      dataType: "json"
    }).done(function(obj) {
      contactStorage = Object.values(obj.contacts).filter(function(entry) {
        switch (frmFilter) {
          case '1':
            return entry.status === 1;
            break;
          case '2':
            return entry.status === 0;
            break;
          default:
            return entry;
        }
      });
      console.log(contactStorage);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert('Error: ' + errorThrown);
    });
  }
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frm_find" id="frm_find" autocomplete="off">
  <div class="row find-row">
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <select class="form-control" name="frm_filterby" id="frm_filterby" required>
        <option value="">--Choose--</option>
        <option value="1">Active</option>
        <option value="2">Inactive</option>
        <option value="3">Show All</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
      <button class="btn btn-block btn-primary" name="frm_search" id="frm_search">
                                        <span class="glyphicon glyphicon-search"></span> Search
                                    </button>
    </div>
  </div>
</form>

If you intend to transform the filtered array back into an object of some sort, you can use the spread operator:

contactStorage = { ...contactStorage};

"Can we apply a filter to the JSON file when it is

Answer №1

Similar questions

Can WebSocket messages be encoded?

How can I troubleshoot Ajax not loading my additional external JavaScript files?

Retrieving Data for Specific Key in JSON Object using BigQuery

Guide on sending a JavaScript variable as a URL parameter in Django

Encountering an issue in my Next.js application with the app router where I am unable to read properties of undefined, specifically in relation to '

I am having trouble with my quiz function as it only checks the answer correctly for the first question. Does anyone have suggestions on how to make it work for

Refreshing a jsp page without the need to reload the content

Cross-Origin Resource Sharing (CORS) in Ajax requests

What causes my JSON file to only allow updates to one field at a time?

(node:19502) UnresolvedPromiseRejectionNotification: Promise rejection not handled (rejection id: 1): TypeError: Unable to access property 'indexOf' of undefined

Launching an Angular application from the local server

What is the correct way to include a MongoDB ObjectId() in the JSON body of an HTTP request

What is the process for setting environment variables in a Svelte project?

Switching between boolean values based on another value in react is a common practice

Discovering the magic of activating a JavaScript function on jQuery hover

Error encountered while converting JSON to CSV due to NoneType issue

Can you explain the distinctions among <Div>, <StyledDiv>, and <Box sx={...}> within the MUI framework?

Storing images in MongoDB using React.js

An approach to transferring the ID of a multiple dropdown within the $.each function

What could be causing my CORS fetch request to not send cookies to the server?