个人中心
gpt4 book ai didi

javascript - 有没有办法在 JSON 数组中搜索可以包含特定值的多个值的字段？

转载 作者：行者123 更新时间：2023-12-02 22:27:58 26 4
gpt4 key购买 nike

我有一个返回结果的 ajax 查询，并应将它们显示在如下所示的 html 表中:

<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>

我想根据受影响的区域对此进行过滤，因此要显示仅列出状态为“打开”的项目，并且仅影响特定区域，例如顾问或客户等。我必须执行的当前代码就过滤状态而言，这是有效的，但当我尝试过滤“受影响的区域”字段时，我只得到空白返回。我一直在使用 JavaScript 变量来包含有关是否已选择某个值的信息，这就是我要过滤的内容，但是我的过滤器脚本仅显示状态值为“打开”的项目如果我在该字段中有多个值，似乎对我不起作用。

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";
})
}

诚然，我不确定 JSON 结果如何在同一字段中显示多个值，但是结果来自对 SharePoint 列表的 REST 查询，并且脚本由此工作，以上是提供有关JSON 表中包含什么类型的数据。

最佳答案

不是存储custSelect的单个变量，而是adviSelect。我建议您改为存储到数组中。它会更干净，更容易做。稍后您可以利用数组 some 函数进行过滤。

<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 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']
    }
  ];

  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>

更新(2019 年 11 月 22 日):

<!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);
        }
        // Log your formData
        console.log(formData);
      };

      const handleSelectOnChange = (select) => {
        const { name, value } = select;
        formData[name] = value;
        // Log your 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>

我创建了一个数组过滤实现的简单工作演示。我尝试避免使用 innerHTML，您可以使用自己的渲染方法。进一步更新了我的答案，以提供更多选项可供选择。

工作演示:https://codesandbox.io/s/html-filter-table-demo-qm19r?fontsize=14&hidenavigation=1&theme=dark

关于javascript - 有没有办法在 JSON 数组中搜索可以包含特定值的多个值的字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58995132/

26 4 0
文章推荐： office365 - 订阅 - MSA 请求不支持指定的资源
文章推荐： sql-server - 找不到表[表名] -2147189180
文章推荐： javascript - 将 td 元素插入到行组中
文章推荐： javascript - 我如何为此设计架构？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com