How to go through JSON product like it is your database?

Question

I have a JSON file which looks like this:

{
  "COMPONENTS_EXPORT_FILENAME" : "Components.xls",
  "CONTRACT_DETAILS_EXPORT_FILENAME" : "ContractDetails.xls",
  "CONTRACT_LIST_EXPORT_FILENAME" : "Contracts.xls",
  "EQUIPMENTS_EXPORT_FILENAME" : "EquipmentList.xls",
  "FILENAME_PDF_SERVICE_PERFORMANCE_REPORT" : "ServicePerformanceReport.pdf",
  "INVOICES_CONTRACT_LIST_EXPORT_FILENAME" : "ContractInvoices.xls",
  "INVOICES_LIST_EXPORT_FILENAME" : "ServiceInvoice.xls",
  "INVOICES_PSR_LIST_EXPORT_FILENAME" : "PSR_Invoices.xls",
  "MG_REQUEST_TYPE_OPTION_VALUES" : "PMReq:#Preventive Maintenance" 
  "OPTIONS_LIST_EXPORT_FILENAME" : "OptionsList.xls"
}

I want to create a search bar where if I type : xls

It should return me:

OPTIONS_LIST_EXPORT_FILENAME: OptionsList.xls
COMPONENTS_EXPORT_FILENAME : Components.xls
CONTRACT_DETAILS_EXPORT_FILENAME : ContractDetails.xls
CONTRACT_LIST_EXPORT_FILENAME : Contracts.xls
EQUIPMENTS_EXPORT_FILENAME" : EquipmentList.xls

and so on

I am using JSON.parse and JSON.stringify

but I have to use specific name like json_file.CONTRACT_LIST_EXPORT_FILENAME

and it gives me contracts.xls

Please suggest a workaround.

After the comments from @nikhil I came up with this code:

    var data = {
   "COMPONENTS_EXPORT_FILENAME" : "Components.xls",
   "CONTRACT_DETAILS_EXPORT_FILENAME" : "ContractDetails.xls",
   "CONTRACT_LIST_EXPORT_FILENAME" : "Contracts.xls",
   "EQUIPMENTS_EXPORT_FILENAME" : "EquipmentList.xls",
  "FILENAME_PDF_SERVICE_PERFORMANCE_REPORT" : 
  "ServicePerformanceReport.pdf",
 "INVOICES_CONTRACT_LIST_EXPORT_FILENAME" : "ContractInvoices.xls",
 "INVOICES_LIST_EXPORT_FILENAME" : "ServiceInvoice.xls",
 "INVOICES_PSR_LIST_EXPORT_FILENAME" : "PSR_Invoices.xls",
 "MG_REQUEST_TYPE_OPTION_VALUES" : "PMReq:#Preventive Maintenance",
 "OPTIONS_LIST_EXPORT_FILENAME" : "OptionsList.xls"
 };


function getTextInput() {
        var e = document.getElementById("myText").value;
        document.getElementById("txt").innerHTML = e;
        return e;
        }

function search(data, searchKey) {
var results = [];

Object.entries(data).forEach(([key, value]) => {
  if (key.toLowerCase().includes(searchKey.toLowerCase()) ||
  value.toLowerCase().includes(searchKey.toLowerCase())) {
  results.push({
    [key]: [value]
  });
 }
});

 for(var i in results)
{
  document.write(i + "=" + results[i] + '<br>');
}


}
   search(data,getTextInput);

Answer 1

You can use Object.entries() and Array.filter() to only return entries which include given search string.

var data = {
  "COMPONENTS_EXPORT_FILENAME" : "Components.xls",
  "CONTRACT_DETAILS_EXPORT_FILENAME" : "ContractDetails.xls",
  "CONTRACT_LIST_EXPORT_FILENAME" : "Contracts.xls",
  "EQUIPMENTS_EXPORT_FILENAME" : "EquipmentList.xls",
  "FILENAME_PDF_SERVICE_PERFORMANCE_REPORT" : "ServicePerformanceReport.pdf",
  "INVOICES_CONTRACT_LIST_EXPORT_FILENAME" : "ContractInvoices.xls",
  "INVOICES_LIST_EXPORT_FILENAME" : "ServiceInvoice.xls",
  "INVOICES_PSR_LIST_EXPORT_FILENAME" : "PSR_Invoices.xls",
  "MG_REQUEST_TYPE_OPTION_VALUES" : "PMReq:#Preventive Maintenance",
  "OPTIONS_LIST_EXPORT_FILENAME" : "OptionsList.xls"
};


function search(data, searchKey) {
  return Object.entries(data).filter(([key, value]) => {
    return key.toLowerCase().includes(searchKey.toLowerCase()) ||
      value.toLowerCase().includes(searchKey.toLowerCase());
  });
}

console.log(search(data, ".xls"));