I am triying filter a json file to match the input value. I write the code below. The json file is multi dimensional.

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I need to match input with key 4 and need to remove duplicate values. How to do it? I tried with

states.key3.filter(...state.key4 but it give errors

CodePudding user response：

This will show the object that has a key4 value equal to the search input:

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can get the filtered result from the key4, so you can use some and 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>