如何匹配多維json中的兩個值

我正在嘗試在多維 JSON 中匹配同一物件的兩個值。首先，我在 key4 中為兩個以建議為特色的輸入欄位搜索一個值。選擇 2 個輸入欄位并單擊提交按鈕后，我需要檢查兩個輸入值是否存在于多維 JSON 中的同一組 JSON 物件中（檢查每個 JSON 物件中的 key4）。我的意思是在兩個輸入欄位中搜索Test value 3和Test value 5時，我應該在下面的元素中獲取 JSON 的第一個元素filter-records，即

{
  "key1": "Test value 1",
  "key3" : [{
      "key4" : "Test value 3",
      "key5" : "Test value 4"
    },
    {
      "key4" : "Test value 5",
      "key5" : "Test value 6"
    }]
}

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("txt-search");
const matchList = document.getElementById("match-list");

searchStates = async searchText => {
  const states = object;
  let matches = states.filter(state => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return state.key3.some(i => i.key4.match(regex)) //(regex);              
  });
  matchList.textContent = JSON.stringify(matches, null, 2)
};





search.addEventListener("keyup", () => searchStates(search.value));


const search2 = document.getElementById("txt-search2");
const matchList2 = document.getElementById("match-list2");

searchStates2 = async searchText2 => {
  const states2 = object;
  let matches2 = states2.filter(state2 => {
    const regex2 = new RegExp(`^${searchText2}`, 'gi');
    return state2.key3.some(i => i.key4.match(regex2)) //(regex);              
  });
  matchList2.textContent = JSON.stringify(matches2, null, 2)
};

search2.addEventListener("keyup", () => searchStates2(search2.value));

const search3 = document.getElementById("submit");
const matchList3 = document.getElementById("filter-records");
searchStates3 = async(searchText3, searchText4) => {
  const states3 = object;
  let matches3 = states3.filter(state3 => {

    return state3.key3.some(i => i.key4 == searchText3 && i.key4 == searchText4)
  });
  matchList3.textContent = JSON.stringify(matches3, null, 2)
};



search3.addEventListener("submit", (evt) => {
  evt.preventDefault();
  searchStates3(search.value, search2.value)
});

<form role="form">
  <div class="form-group">
    <input type="input" class="form-control" id="txt-search" placeholder="Type your search character">
    <div id="match-list"></div>
    <input type="input" class="form-control" id="txt-search2" placeholder="Type your search character">
    <div id="match-list2"></div>
    <input type="submit" id="submit" value="submit">
  </div>
</form>


<div class="row" style="overflow-x:auto;">
  <div class="col">
    <div>
      <div id="filter-records"></div>
    </div>
  </div>
</div>

在實時模式下，我從使用以下代碼獲得的檔案中獲取 JSON const res2 = await fetch('./tt.json');const states2 = await res2.json();。使用此代碼，我在控制臺中收到以下錯誤。Uncaught TypeError: Cannot read properties of undefined (reading 'search')和Uncaught SyntaxError: Unexpected token ] in JSON at position 0。如何使其適用于多維 JSON 中的兩個值？

uj5u.com熱心網友回復：

創建函式，以便可以“輸入”一次搜索的結果作為第二次搜索的輸入（狀態）（因此，實際上，您對已被第一次搜索過濾的狀態執行第二次搜索）。這樣效率更高，代碼也更簡潔：

const 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("txt-search");
const matchList = document.getElementById("match-list");
const search2 = document.getElementById("txt-search2");
const matchList2 = document.getElementById("match-list2");

const searchStates = ({ search, states }) => {
  const regex = new RegExp(`^${search}`, 'gi');
  return states.filter(state => state.key3.some(e => e.key4.match(regex)))
}

const updateElTextContent = ({ el, text }) => {
  el.textContent = JSON.stringify(text, null, 2)
}

const searchKeyupHandler = (matchListContainer, object) => (value) => {
  const matches = searchStates({ search: value, states: object })
  updateElTextContent({ el: matchListContainer, text: matches })
}

const input1Handler = searchKeyupHandler(matchList, object)
const input2Handler = searchKeyupHandler(matchList2, object)

search.addEventListener("keyup", (e) => {
  input1Handler(e.target.value)
});
search2.addEventListener("keyup", (e) => {
  input2Handler(e.target.value)
});


const form = document.getElementById('form')
const matchList3 = document.getElementById("filter-records");

// just feed the result of the first search match to the
// second one - as states
const searchTwoStates = ({ s1, s2, obj }) => {
  const match1 = searchStates({ search: s1, states: obj })
  const match2 = searchStates({ search: s2, states: match1 })
  updateElTextContent({ el: matchList3, text: match2 })
};

form.addEventListener("submit", (evt) => {
  evt.preventDefault();
  evt.stopPropagation();
  searchTwoStates({ s1: search.value, s2: search2.value, obj: object })
});

<form id="form" role="form">
  <div class="form-group">
    <input type="input" class="form-control" id="txt-search" placeholder="Type your search character" />
    <div id="match-list"></div>
    <input type="input" class="form-control" id="txt-search2" placeholder="Type your search character" />
    <div id="match-list2"></div>
    <input type="submit" id="submit" value="submit" />
    <input type="reset" value="reset" />
  </div>
</form>


<div class="row" style="overflow-x:auto;">
  <div class="col">
    <div>
      <div id="filter-records"></div>
    </div>
  </div>
</div>

標籤：

上一篇：如何檢查發送了哪條訊息并相應地回傳回復？

下一篇：如何正確地為json反序列化創建模型？