Search into multiple json files when button clicked and sort results using javascript

user_16600414 0
Viewed 201

I need to search a value into 2 Json files at the same time, then sort the results alphabetically in ascending order and display them in a div. I have an issue sorting the results. Please, can someone help? thanks!

Here is the HTML:

<input type="text" name="search" id="search" />
<button id="actionBtn">Click</button>
<div id="result" style="background-color: #cc0"> </div>

Here is the javascript: I basicaly first get access to both json.files and then join both file and do a search.

<script>
        $(document).ready(function (){

            //$.ajaxSetup({ cache: false });
            $("button").click(function(){

                $('#result').html('');
                $('#state').val('');

                var searchField = $('#search').val();
                var expression = new RegExp(searchField, "i");  
                const urls = ["data.json", "data2.json"];


                Promise.all(urls.map((url) => fetch(url).then((e) => e.json()))).then(
                (data) => { 

                    finalResult = data.flat();

                    $.each(finalResult, function(key, value){
                      
                        if (value.name.search(expression) != -1)
                        { 
                       $('#result').append('<li>'+value.name+'</li>');

                          finalResult.sort(function (a, b) {
                            var nameA = a.name.toUpperCase();  
                            var nameB = b.name.toUpperCase();  

                            if (nameA < nameB) {
                                return -1;
                            }
                            if (nameA > nameB) {
                                return 1;
                            } 

                            return 0;
                            });//end sorting
                        } //end for 
                        
                    
                   
                        }
                    }); 


                });
               
  
            }); 

        });

Here is file data.json:

[
    {
      "name":"Paula Vargas", 
      "location":"Baltimore, MD"
    },
    {
      "name":"Dony Peterson", 
      "location":"Hallandale Beach, FL"
    },
    {
      "name":"Viola Francis", 
      "location":"Zanesville, OH"
    },
    {
      "name":"Reginald Benson", 
      "location":"Gilbert, AZ"
    },
    {
      "name":"Dony 2 Dean", 
      "location":"Muscatine, IA"
    },
    {
      "name":"Glenda Ray", 
      "location":"Baltimore, MD"
    }
]

here is file data2.json:

[
    {
      "name":"Jaime Campbell",
      "location":"Zanesville, OH"
    },
    {
      "name":"Mike Beck", 
      "location":"Garner, NC"
    },
    {
      "name":"Donyson McLauren",
      "location":"Cabin John, MD"
    },
    {
      "name":"Ryan Wolfe",
      "location":"Los Angeles, CA"
    },
    {
      "name":"Dwayne Gutierrez",
      "location":"San Jose, CA"
    },
    {
      "name":"Bill Burke",
      "location":"Bakersfield, CA"
    }
]

When user searches for Dony, here is the Expected output:

<ul>
<li>Dony Peterson</li>
<li>Donyson McLauren</li>
</ul>
sorting json javascript
1 Answers

Here you go

async function getJsonFiles() {
const urls = ["json1.json", "json2.json"];
const matchString = 'Dony'
    const data = await Promise.all(urls.map((url) => fetch(url).then((e) => e.json())))
    const finalResult = data.flat()
    finalResult.forEach(a => {
        if (a.name.includes(matchString)){
            console.log(a)
        }
    })
}

getJsonFiles()

comment down if any its a solution.

user_121168480
Related