如何過濾多維json檔案以匹配輸入值

我正在嘗試過濾一個 json 檔案以匹配輸入值。我寫了下面的代碼。json 檔案是多維的。

var object = [{"key1" : "Test value 1",
    "key3" : [{
    "key4" : "Test value 3",
    "key5" : "Test value 4"
    },
    {
    "key4" : "Test value 5",
    "key5" : "Test value 6"
    }]
    },
    {
    "key1" : "Test value 11",
    "key3" : [{
    "key4" : "Test value 13",
    "key5" : "Test value 14"
    },
    {
    "key4" : "Test value 15",
    "key5" : "Test value 16"
    }]
    }];

   const search = document.getElementById("search");
    const matchList = document.getElementById("match-list");
    
    searchStates = searchText => {
        
        const states = object;
        
        let matches = states.filter(state => {
            const regex = new RegExp(`^${searchText}`, 'gi');
            
            return state.key3.key4.match(regex);
        });
        console.log(matches);
    };
    
    search.addEventListener("input", () => searchStates(search.value));

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here">
<div id="match-list"></div>

我需要將輸入與鍵 4 匹配并需要洗掉重復值。怎么做？我試過

states.key3.filter(...state.key4 但它給出了錯誤

uj5u.com熱心網友回復：

您可以從 中獲得過濾結果key4，因此您可以使用some和includes

let matches = states.filter(state => state.key3.some(o => o.key4.toLowerCase().includes(searchText.toLowerCase())));

var object = [{
    "key1": "Test value 1",
    "key3": [{
        "key4": "Test value 3",
        "key5": "Test value 4"
      },
      {
        "key4": "Test value 5",
        "key5": "Test value 6"
      }
    ]
  },
  {
    "key1": "Test value 11",
    "key3": [{
        "key4": "Test value 13",
        "key5": "Test value 14"
      },
      {
        "key4": "Test value 15",
        "key5": "Test value 16"
      }
    ]
  }
];

const search = document.getElementById("search");
const matchList = document.getElementById("match-list");

searchStates = searchText => {
  const states = object;
  let matches = states.filter(state => state.key3.some(o => o.key4.toLowerCase().includes(searchText.toLowerCase())));
  console.clear();
  console.log(matches);
};

search.addEventListener("input", (e) => {
  searchStates(e.target.value)
});

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here">
<div id="match-list"></div>

uj5u.com熱心網友回復：

這將顯示具有key4與搜索輸入完全相等的值的物件：

var object = [
  { key1: 'Test value 1', key3: [ 
    { key4: 'Test value 3', key5: 'Test value 4' },
    { key4: 'Test value 5', key5: 'Test value 6' }
  ]},

  { key1: 'Test value 11', key3: [ 
    { key4: 'Test value 13', key5: 'Test value 14' }, 
    { key4: 'Test value 15', key5: 'Test value 16' }
  ]},
]

const search = document.getElementById('search')
const matchList = document.getElementById('match-list')
searchStates = searchText => {
  const found = object.filter(obj => {
    return obj.key3.some(i => i.key4 == searchText)
  })
  matchList.textContent = JSON.stringify(found, null, 2)
}

search.addEventListener('input', () => searchStates(search.value))

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
<pre id="match-list"></pre>

對于以搜索輸入值開頭的匹配值，您可以執行以下操作：

var object = [
  {
    key1: 'Test value 1',
    key3: [
      { key4: 'Test value 3', key5: 'Test value 4' },
      { key4: 'Test value 5', key5: 'Test value 6' },
    ],
  },

  {
    key1: 'Test value 11',
    key3: [
      { key4: 'Test value 13', key5: 'Test value 14' },
      { key4: 'Test value 15', key5: 'Test value 16' },
    ],
  },
]

const search = document.getElementById('search')
const matchList = document.getElementById('match-list')

searchStates = searchText => {
  if (!searchText) return (matchList.textContent = '')

  searchText = searchText.toLowerCase()
  const inputLength = searchText.length
  const found = object.filter(obj => {
    return obj.key3.some(
      i => i.key4.slice(0, inputLength).toLowerCase() == searchText
    )
  })
  matchList.textContent = JSON.stringify(found, null, 2)
}

search.addEventListener('input', () => searchStates(search.value))

<input type="text" id="search" class="form-control form-control-lg" placeholder="type here" />
<pre id="match-list"></pre>

標籤：javascript json

上一篇：JavaScript檢查陣列和物件匹配

下一篇：將JS陣列與HTML表連接