Define string as nested array path

Question

I'm using ajax to request an API (https://restcountries.com/v3.1/all) and I want to filter the results based on different search types. The default search type is by name where if you type a letter, it will check if the letter occurs in any of the names in the list, however, what I am trying to do is to make the name filter interchangeable with other attributes in the array. The filters I am using are:

arrName[index]['name']['common']
arrName[index]['region']
arrName[index]['fifa']

The code I am using is:

<body>
    <h1 id="title">Ajax Example</h1>
    <h3>Countrys:</h3>
    <select id="options" onChange="changed()">
        <option class="filter" id="name.common">Name</option>
        <option class="filter" id="region">Region</option>
        <option class="filter" id="fifa">Code</option>
    </select>
    <input id="search"></input>
    <br><br>
    <table id="results">
        <tr>
            <td>Name</td>
            <td>Region</td>
            <td>Flag</td>
            <td>Population</td>
        </tr>
    </table>

    <script>
        $(document).ready(function () {
            $("#search").attr("onInput", "countrySearch(`['name']['common']`)")
            var url = 'https://restcountries.com/v3.1/all';
            $.get(url, onDataReceived);
        });

        function onDataReceived(data) {
            mydata = data;
            countrySearch("['name']['common']");
        }

        function countrySearch(filter) {
            var results = [];
            $(".searchResults").remove();
            mydata.forEach(function (item, index) {
                row = (mydata[index] + filter);
                console.log(row);
                if (item['name']['common'].toLowerCase().includes($("#search").val().toLowerCase())) {
                    results.push(item.name.common);
                    $("#results").append("<tr class='searchResults'><td>" + item.name.common + "</td><td>" + item.region + "</td><td><img src=" + item.flags.png + " style='width:30%'></img></td><td>" + item.population + "</td></tr>");
                }
            })
            console.log(results);
        }

        function changed() {
            $("#search").attr("onInput", countrySearch("['" + $('option.filter:selected').attr('id') + "']"))
        }
    </script>
</body>

What I want to do is to use row as an array path, or rather, add filter onto the end of item, so if filter = ['name']['common'], I want row to be the value of item['name']['common']. Currently, the console.log() after row is defined in countrySearch(), is returning [object Object]['name']['common'] when I want it to return the value, not the path as a string.

Does this answer your question? https://stackoverflow.com/questions/6393943/convert-a-javascript-string-in-dot-notation-into-an-object-reference — Nick, Sep 15 '22 at 02:23

score 0 · Answer 1 · answered Sep 15 '22 at 02:46

0

Turns out I was being stupid. I was trying to use data[i]['name']['common'] when I was later using data[i].name.common, which works, so I am not sure why I was trying to do it the other way.

answered Sep 15 '22 at 02:46

Sheep

41
3

Define string as nested array path

1 Answers1