Is it possible to search for a specific value within a field in a JSON array that may contain multiple values?

Question

Is it possible to search for a specific value within a field in a JSON array that may contain multiple values?

My challenge involves an ajax query that fetches results to be displayed in an html table as shown below:

<input type="button" value="Customer" onclick="SelectCustomer()">
<input type="button" value="Advisor" onclick="SelectAdvisor()">
<input type="button" value="Get Results" onclick="GetResults()">
<table id="results">
</table>

I aim to filter these results based on the affected area, displaying items with a status of Open and specific areas like Advisors or Customers. While my current filtering code successfully filters by Status, I face difficulties when trying to filter by the Affected Area field. Experimenting with JavaScript variables to store selection information for filtering has not yielded expected results, especially if the field contains multiple values.

var dResponse = [
    {"Reference": "123456","Status": "Open","AffectedArea": ["IT","Advisor"]}
    {"Reference": "654321","Status": "Closed","AffectedArea": ["Customer","IT"]}
    {"Reference": "567889","Status": "Open","AffectedArea": ["Advisor","Customer"]}
    {"Reference": "987654","Status": "Open","AffectedArea": ["Customer"]}
]
var custSelect = "Unselected";
var adviSelect = "Unselected";
var custfil = "";
var advifil = "";

function SelectCustomer(){
    if (custSelect == "Unselected") {
        custSelect = "Selected";
        adviSelect = "Unselected";
    } else {
        custSelect = "Unselected";
    }
}
function SelectAdvisor(){
    if (adviSelect == "Unselected") {
        adviSelect = "Selected";
        custSelect = "Unselected";
    } else {
        adviSelect = "Unselected";
    }
}

function GetResults() {
    var results = document.getElementById("results");
    var filResponse = dResponse.filter(function(item){
        return item.Status == "Open";
    })
    if (custSelect == "Selected"){
        FilterCust();
    }
    if (adviSelect ==" Selected"){
        FilterAdvi();
    }
    results.innerHTML += "<tr><td>Reference</td><td>Status</td><td>Affected Area</td></tr>";
    for(var obj in filResponse){
        results.innerHTML += "<tr><td>" + dResponse[obj].Reference + "</td><td>" + dResponse[obj].Status + "</td><td>" + dResponse[obj].AffectedArea + "</td></tr>";
    }
}

function FilterCust() {
 filResponse = dResponse.filter(function(item){
  return item.ImpactedArea == "Customer";
})
}
function FilterAdvi() {
 filResponse = dResponse.filter(function(item){
  return item.ImpactedArea == "Advisor";
})
}

The JSON results display multiple values in the same field, stemming from a REST query to a SharePoint list. Despite facing challenges with filtering, the script manages to extract data as intended.

javascript json ajax rest

Answer 1

Answer №1

Instead of keeping track of individual variables like custSelect and adviSelect, I recommend storing them in an array for a cleaner and more efficient approach. You can then use the array with the some function to perform filtering.

<input type="button" value="Customer" onclick="handleOnChange(this.value)" />
<input type="button" value="Advisor" onclick="handleOnChange(this.value)" />
<input type="button" value="Get Results" onclick="GetResults()" />
<table id="results">
  <!-- Table content will be generated dynamically using JavaScript -->
</table>

<script>
  const dResponse = [
    {
      Reference: '123456',
      Status: 'Open',
      AffectedArea: ['IT', 'Advisor']
    },
    {
      Reference: '654321',
      Status: 'Closed',
      AffectedArea: ['Customer', 'IT']
    },
    {
      Reference: '567889',
      Status: 'Open',
      AffectedArea: ['Advisor', 'Customer']
    },
    {
      Reference: '987654',
      Status: 'Open',
      AffectedArea: ['Customer']
    }
  ];

  let selectedArea = [];
  const handleOnChange = value => {
    const index = selectedArea.findIndex(a => a === value);
    if (index > -1) {
      selectedArea.splice(index, 1);
    } else {
      selectedArea.push(value);
    }
  };

  const GetResults = () => {
    const results = document.getElementById('results');
    const filResponse = dResponse.filter(item => item.Status == 'Open' && selectedArea.some(a => item.AffectedArea.indexOf(a) > -1));
    results.innerHTML +=
      '<tr><td>Reference</td><td>Status</td><td>Affected Area</td></tr>';
    filResponse.forEach(item => {
      results.innerHTML +=
        '<tr><td>' +
        item.Reference +
        '</td><td>' +
        item.Status +
        '</td><td>' +
        item.AffectedArea +
        '</td></tr>';
    });
  };
</script>

Update (11/22/2019) :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .selected {
        background: yellow;
      }
    </style>
  </head>
  <meta charset="utf-8" />
  <body>
    <form onsubmit="GetResults(event)">
      <input type="button" name="AffectedArea" value="IT" onclick="handleToggleOnChange(this)" />
      <input type="button" name="AffectedArea" value="Customer" onclick="handleToggleOnChange(this)" />
      <input type="button" name="AffectedArea" value="Advisor" onclick="handleToggleOnChange(this)" />
      <select name="Status" onchange="handleSelectOnChange(this)">
        <option value="Open" selected="selected">Open</option>
        <option value="Closed">Closed</option>
      </select>
      <input type="submit" />
    </form>
    <table id="results">
      <!-- Table content will be created with Javascript -->
    </table>
    <script>
      const dResponse = [
        {
          Reference: "123456",
          Status: "Open",
          AffectedArea: ["IT", "Advisor"]
        },
        {
          Reference: "654321",
          Status: "Closed",
          AffectedArea: ["Customer", "IT"]
        },
        {
          Reference: "567889",
          Status: "Open",
          AffectedArea: ["Advisor", "Customer"]
        },
        {
          Reference: "987654",
          Status: "Open",
          AffectedArea: ["Customer"]
        }
      ];

      // Store form's filter data
      const formData = {
        AffectedArea: [],
        Status: 'Open',
      }

      const handleToggleOnChange = input => {
        const { name, value } = input;
        const index = formData[name].findIndex(a => a === value);
        if (index > -1) {
          input.classList.remove('selected');
          formData[name].splice(index, 1);
        } else {
          input.classList.add('selected');
          formData[name].push(value);
        }
        // Display formData
        console.log(formData);
      };

      const handleSelectOnChange = (select) => {
        const { name, value } = select;
        formData[name] = value;
        // Display formData
        console.log(formData);
      }

      const createRow = () => document.createElement("tr");

      const createColumn = (text, colspan) => {
        const column = document.createElement("td");
        const textNode = document.createTextNode(text);
        column.appendChild(textNode);
        column.setAttribute('colspan', colspan);
        return column;
      };

      const GetResults = (e) => {
        e.preventDefault();
        const results = document.getElementById("results");
        const filResponse = dResponse.filter(
          item =>
            // Status must be Open
            item.Status == formData.Status &&
            // Item's AffectedArea's array includes one of the selected area
            formData.AffectedArea.some(a => item.AffectedArea.indexOf(a) > -1)
        );
        // Clear previous result
        while (results.firstChild) {
          results.firstChild.remove();
        }
        // Create header row
        const headerRow = createRow();
        let headerKeys = [];
        if (dResponse.length > 0) {
          headerKeys = Object.keys(dResponse[0]);
          headerKeys.forEach(key => {
            headerRow.appendChild(createColumn(key));
          });
        }
        results.appendChild(headerRow);
        // Create content result rows
        if (filResponse.length > 0) {
          const rows = [];
          filResponse.forEach(item => {
            const row = createRow();
            Object.values(item).forEach(value => {
              row.appendChild(createColumn(value));
            });
            rows.push(row);
          });
          if (rows.length > 0) {
            rows.forEach(r => {
              results.appendChild(r);
            });
          }
        } else {
          // Create no results found row
          const row = createRow();
          row.appendChild(createColumn("No results found", headerKeys.length));
          results.appendChild(row);
        }
      };
    </script>
  </body>
</html>

This is a unique implementation where I suggest utilizing arrays for efficient filtering in your project. I have provided additional options for user selection and improved organization of the code. Check out the live demo for a better understanding:

Live Demo Link: https://codesandbox.io/s/html-filter-table-demo-qm19r?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Instead of keeping track of individual variables like custSelect and adviSelect, I recommend storing them in an array for a cleaner and more efficient approach. You can then use the array with the some function to perform filtering.

<input type="button" value="Customer" onclick="handleOnChange(this.value)" />
<input type="button" value="Advisor" onclick="handleOnChange(this.value)" />
<input type="button" value="Get Results" onclick="GetResults()" />
<table id="results">
  <!-- Table content will be generated dynamically using JavaScript -->
</table>

<script>
  const dResponse = [
    {
      Reference: '123456',
      Status: 'Open',
      AffectedArea: ['IT', 'Advisor']
    },
    {
      Reference: '654321',
      Status: 'Closed',
      AffectedArea: ['Customer', 'IT']
    },
    {
      Reference: '567889',
      Status: 'Open',
      AffectedArea: ['Advisor', 'Customer']
    },
    {
      Reference: '987654',
      Status: 'Open',
      AffectedArea: ['Customer']
    }
  ];

  let selectedArea = [];
  const handleOnChange = value => {
    const index = selectedArea.findIndex(a => a === value);
    if (index > -1) {
      selectedArea.splice(index, 1);
    } else {
      selectedArea.push(value);
    }
  };

  const GetResults = () => {
    const results = document.getElementById('results');
    const filResponse = dResponse.filter(item => item.Status == 'Open' && selectedArea.some(a => item.AffectedArea.indexOf(a) > -1));
    results.innerHTML +=
      '<tr><td>Reference</td><td>Status</td><td>Affected Area</td></tr>';
    filResponse.forEach(item => {
      results.innerHTML +=
        '<tr><td>' +
        item.Reference +
        '</td><td>' +
        item.Status +
        '</td><td>' +
        item.AffectedArea +
        '</td></tr>';
    });
  };
</script>

Update (11/22/2019) :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .selected {
        background: yellow;
      }
    </style>
  </head>
  <meta charset="utf-8" />
  <body>
    <form onsubmit="GetResults(event)">
      <input type="button" name="AffectedArea" value="IT" onclick="handleToggleOnChange(this)" />
      <input type="button" name="AffectedArea" value="Customer" onclick="handleToggleOnChange(this)" />
      <input type="button" name="AffectedArea" value="Advisor" onclick="handleToggleOnChange(this)" />
      <select name="Status" onchange="handleSelectOnChange(this)">
        <option value="Open" selected="selected">Open</option>
        <option value="Closed">Closed</option>
      </select>
      <input type="submit" />
    </form>
    <table id="results">
      <!-- Table content will be created with Javascript -->
    </table>
    <script>
      const dResponse = [
        {
          Reference: "123456",
          Status: "Open",
          AffectedArea: ["IT", "Advisor"]
        },
        {
          Reference: "654321",
          Status: "Closed",
          AffectedArea: ["Customer", "IT"]
        },
        {
          Reference: "567889",
          Status: "Open",
          AffectedArea: ["Advisor", "Customer"]
        },
        {
          Reference: "987654",
          Status: "Open",
          AffectedArea: ["Customer"]
        }
      ];

      // Store form's filter data
      const formData = {
        AffectedArea: [],
        Status: 'Open',
      }

      const handleToggleOnChange = input => {
        const { name, value } = input;
        const index = formData[name].findIndex(a => a === value);
        if (index > -1) {
          input.classList.remove('selected');
          formData[name].splice(index, 1);
        } else {
          input.classList.add('selected');
          formData[name].push(value);
        }
        // Display formData
        console.log(formData);
      };

      const handleSelectOnChange = (select) => {
        const { name, value } = select;
        formData[name] = value;
        // Display formData
        console.log(formData);
      }

      const createRow = () => document.createElement("tr");

      const createColumn = (text, colspan) => {
        const column = document.createElement("td");
        const textNode = document.createTextNode(text);
        column.appendChild(textNode);
        column.setAttribute('colspan', colspan);
        return column;
      };

      const GetResults = (e) => {
        e.preventDefault();
        const results = document.getElementById("results");
        const filResponse = dResponse.filter(
          item =>
            // Status must be Open
            item.Status == formData.Status &&
            // Item's AffectedArea's array includes one of the selected area
            formData.AffectedArea.some(a => item.AffectedArea.indexOf(a) > -1)
        );
        // Clear previous result
        while (results.firstChild) {
          results.firstChild.remove();
        }
        // Create header row
        const headerRow = createRow();
        let headerKeys = [];
        if (dResponse.length > 0) {
          headerKeys = Object.keys(dResponse[0]);
          headerKeys.forEach(key => {
            headerRow.appendChild(createColumn(key));
          });
        }
        results.appendChild(headerRow);
        // Create content result rows
        if (filResponse.length > 0) {
          const rows = [];
          filResponse.forEach(item => {
            const row = createRow();
            Object.values(item).forEach(value => {
              row.appendChild(createColumn(value));
            });
            rows.push(row);
          });
          if (rows.length > 0) {
            rows.forEach(r => {
              results.appendChild(r);
            });
          }
        } else {
          // Create no results found row
          const row = createRow();
          row.appendChild(createColumn("No results found", headerKeys.length));
          results.appendChild(row);
        }
      };
    </script>
  </body>
</html>

This is a unique implementation where I suggest utilizing arrays for efficient filtering in your project. I have provided additional options for user selection and improved organization of the code. Check out the live demo for a better understanding:

Live Demo Link: https://codesandbox.io/s/html-filter-table-demo-qm19r?fontsize=14&hidenavigation=1&theme=dark

Is it possible to search for a specific value within a field in a JSON array that may contain multiple values?

Answer №1

Update (11/22/2019) :

Similar questions

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

The PHP function is not successfully receiving a value from the AJAX call to be entered into the Database

When the jQuery button is clicked, the execute function will run multiple times

User events in the fullCalendar

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

Creating Text Transitions with JavaScript in Qualtrics: An In-Depth Guide

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Can the table be automatically updated on page reload?

What are some effective ways to optimize a scrolling script?

linking a div within a navigation bar

combine all of the values listed below into one cohesive value

Expo constants failing to load on web due to unresolved manifest object issue

The module script failed to load due to an unexpected response from the server, which was MIME type of text/jsx instead of a javascript module script

Make sure the inputs in separate table data cells are lined up in

What is the best way to incorporate Cross-Origin Resource Sharing (CORS

Is the scrolling functionality acting strange while using React Three Fiber?

When utilizing jQuery lightbox to pull data from a database using PHP/Ajax, it may require a double click the

What is the best way to access the dimensions of a parent element in React with Hooks?

Encountered an error with symbol '@' while utilizing ES6 decorators

Debugging JavaScript in ASP .NET (solving quick breakpoint problems)