Query and display JSON data according to url parameter

Question

Hello everyone, I really need your help!!!

I need to display data from a Json on a page (< p >, < H1 > etc...), according to the url parameter.

My Json is like this:

    {
        "outputName": "junho=2020",
        "pugData": {
            "mes": "junho",
            "ano": "2020",
            "sku01": "11111",
            "sku02": "11111",
            "sku03": "11111",
            "sku04": "11111"
        }
    },
    {
        "outputName": "julho=2020",
        "pugData": {
            "mes": "julho",
            "ano": "2020",
            "sku01": "22222",
            "sku02": "22222",
            "sku03": "22222",
            "sku04": "22222"
        }
    },
    {
        "outputName": "agosto=2020",
        "pugData": {
            "mes": "julho",
            "ano": "2020",
            "sku01": "33333",
            "sku02": "33333",
            "sku03": "33333",
            "sku04": "33333"
        }
    }
]

That is, if in my url I pass the parameter www.lukas.com.br/? june=2020 i would display the data with the same outputName, if I had ? July=2020, I would exhibit the July, and so on.

Is it possible to do this query by the url parameter to display the data on the page? Remember that each month, I will add a new data block to the json, with the recurring month.

Obs.: Usually I do the url parameter in this following code:

if (window.location.href.indexOf("junho=2020") !== -1) {
    //Condições aqui
}

I’m not getting the two together, dynamically speaking...

Note 2: If you need to change the structure of Json, I also change...

I really appreciate the help :)

Answer 1

Instead of using

if (window.location.href.indexOf("junho=2020") !== -1) {
    //Condições aqui
}

You can try

if (window.location.pathname == "/junho=2020") {
    //Condições aqui
}

Answer 2

You can use the method match of strings with a regular expression equivalent to the mes=year pattern, to know which month and year were reported in the url. If it doesn’t find the pattern, it does nothing. Finding the pattern, it traverses the json data with a for and compares found text with attribute outputName of each json object.

    function usaJsonParamUrl()
    {
        var listaJson = [
            {
                "outputName": "junho=2020",
                "pugData": {
                    "mes": "junho",
                    "ano": "2020",
                    "sku01": "11111",
                    "sku02": "11111",
                    "sku03": "11111",
                    "sku04": "11111"
                }
            },
            {
                "outputName": "julho=2020",
                "pugData": {
                    "mes": "julho",
                    "ano": "2020",
                    "sku01": "22222",
                    "sku02": "22222",
                    "sku03": "22222",
                    "sku04": "22222"
                }
            },
            {
                "outputName": "agosto=2020",
                "pugData": {
                    "mes": "julho",
                    "ano": "2020",
                    "sku01": "33333",
                    "sku02": "33333",
                    "sku03": "33333",
                    "sku04": "33333"
                }
            }
        ];

        try {
            // tenta pegar a string mes=ano na url, usando expressão regular e método match de string
            // var mesAno = window.location.href.match(/\w+\=\d{4}/).toString(); // descomentar para situação real
            var mesAno = 'www.lukas.com.br/?junho=2020'.match(/\w+\=\d{4}/).toString(); // comentar, somente para exemplificar
        } catch (ex) {
            return; // não achou, interrompe o processo sem fazer nada
        }

        for (var i = 0; i < listaJson.length; i++) {
            if (listaJson[i].outputName === mesAno) {
                console.log(listaJson[i]);
                console.log(listaJson[i].pugData);
                console.log(listaJson[i].pugData.sku01);
                return; // achou, usou, interrompe o processo
            }
        }
    }

    usaJsonParamUrl();