I have a variable called "rela" which retrieves data from a query if there is a match with the database table (I have already tried this and it works). I do this in a fetch()
promise, now I want to change the code I have since I have thought of a conditional to check if the variable is NULL
.
This is what I have
fetch('prdSimilares.php',{
method: 'POST',
body: data
})
.then(res => res.json())
.then(dataS => {
let rela = JSON.parse(JSON.stringify(dataS));
let html = ' ';
for (let i = 0; i < rela.length; i++) {
html += `<div class="item">
<img class="img-trj-prodRela" src="${rela[i].foto}" alt="${rela[i].nombre}" id="${rela[i].categoria},${rela[i].subcategoria},${rela[i].nombre},${rela[i].codigo},${rela[i].id_cat}" onclick="javascript: clave()">
</div>`;
}
...
...
});
what I have tried: first I commented on the for loop and did an console.log(typeof rela)
I get that rela is an object, then I did console.log(rela)
to see what was obtained and the response was a [null]
; already with this I tried to put a
if (rela === null){
console.log('vacio');
//ocultar contenedor
} else {
for (let i = 0; i < rela.length; i++) {
...
...
}
}
But the "empty" message was not shown in the console and I did the for loop code, I also tried using the operator ==
and in the same way the message was not shown and the loop was made.
I don't want to leave you without this conditional since the error in this part would remain in the console. How can I check if the variable is null?
The check you do must be done inside the loop in this case. What happens is that the rela variable is not null because it is an Array.
I don't know, since I don't know what comes from the fetch, it would be nice to see an example of the response.
You can do this anyway, if the variable is null it would never enter the loop:
Since I had previously made the query related to the data type (
typeof
) and since it also told me in the console that it had alength
1, I intuited that it is an array even though it was not declared as such, therefore the conditional that I perform is: ` ` if (rela[rela.length - 1] == null) { console.log("empty"); ... } else { for(let i = 0; i < rela.length; i++){ html += .....; } }First, I recommend an optimization, because there is no point in interpreting the server response as JSON with
res => res.json()
and then converting it to a string and interpreting it again withlet rela = JSON.parse(JSON.stringify(dataS));
, you are just complicating the logic and giving the browser more work than necessary.According to the response you get in the console
[null]
, it is an array with a single null element.Two other problems I see:
onclick
the protocol is superfluousjavascript:
, it is no longer necessary and, furthermore, when executing the function you are not sending a parameter that allows you to identify where the event originatedFor the second point, you could leave
onclick="clave(event)"
to be able to identify the element byevent.target
; element.addEventListener() is always better either way , though it's a bit trickier to assign, because you're creating HTML instead of elements.