Javascript lookup in a table that has minimum and maximum values of latitude and longitude and return the grid value

Question

I have a latitude /longitude pair that i gets from a json . Requirement is that I need to return the grid value corresponding to that latitude/longitude pair. I have this table that has the min and max values for the latitude and longitude for a corresponding value. it looks like this :

I am new to javascript. How can i code a function / a code to get the value after checking if the incoming latitude and longitude falls within the range for each grid value? Thank you for your help.

Answer 1

I'm not sure I interpret your question properly, but try this.

const [latitude, longitude] = [117.5783, -33.6768];

function getData() {
    const tbody = document.querySelector("tbody");
    const rows = [...tbody.rows];
    const data = rows.map(row => {
        const [minLng, minLat, maxLng, maxLat, gridName] = [...row.cells].map(
            cell => cell.textContent
        );

        return {
            minLng: +minLng,
            minLat: +minLat,
            maxLng: +maxLng,
            maxLat: +maxLng,
            gridName
        };
    });

    return data;
}

function getGridValue({ latitude, longitude }) {
    const data = getData();

    const item = data.find(
        item =>
            (item.minLat >= latitude || item.maxLat <= latitude) ||
            (item.minLng >= longitude || item.maxLng <= longitude)
    );

    if (item) {
        return item.gridName;
    }

    return null;
}
const value = getGridValue({ latitude, longitude });

console.log(value);

<table>
    <thead>
        <tr>
            <th>MIN_LNG</th>
            <th>MIN_LAT</th>
            <th>MAX_LNG</th>
            <th>MAX_LAT</th>
            <th>GRIDname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>117.5783</td>
            <td>-33.6764</td>
            <td>117.5787</td>
            <td>-33.6766</td>
            <td>5c</td>
        </tr>
        <tr>
            <td>117.5783</td>
            <td>-33.6766</td>
            <td>117.5785</td>
            <td>-33.6768</td>
            <td>4c</td>
        </tr>
        <tr>
            <td>117.5783</td>
            <td>-33.6768</td>
            <td>117.5785</td>
            <td>-33.6770</td>
            <td>3c</td>
        </tr>
    </tbody>
</table>

First I simulate the pair of data you get from json const [latitude, longitude] = [117.5783, -33.6768];

The getData function obtains the data from an html table, so I am unaware of the origin of the data. I do this because it is easier to work with arrays and objects than with DOM nodes

The function getGridValue searches the data and if the condition is fulfilled it will return the value of the gridName property otherwise it will return null

Again, I hope I have interpreted your question properly, I hope you find it useful