Loop Inside function of React Component

Question

(React web app development) In order to check if the current stock status of products, I use ID of products to loop through json data. I am trying to retrieve value of "DATAPAYLOAD" by key (id) from json (below). idsent is string passed from another component. But "if (Data.response[i].id === idsent)" this condition always appears to be false because I got "failed" in console. That would be really helpful if someone could take a look at the following code and give me some sujections, thanks in advance!

onButtonClicked = () => {
        const idsent="D56F36C6038DFC8244F"
        for (var i = 0; i < Data.response.length; i++) {
            if (Data.response[i].id === idsent) {
                name = Data.response[i].DATAPAYLOAD;
                const word = '<INSTOCKVALUE>INSTOCK</INSTOCKVALUE>';
                if (name.includes(word)) {
                    return true;
                }
                else {
                    return false;
                }
            }
            console.log("failed");
        }

The following is part of the json data that is requested through fetch get-method.

Data=    {
    "code": 200,
    "response": [
        {
            "id": "CED62C6F96BD0E21655142F",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
            <INSTOCKVALUE>OUTOFSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
        },
        {
            "id": "D56F36C6038DFC8244F",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
            <INSTOCKVALUE>LESSTHAN10</INSTOCKVALUE>\n</AVAILABILITY>"
        },
        {
            "id": "4536C9E608B563A749",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
             <INSTOCKVALUE>INSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
        },
        {
            "id": "3A576872130625CABFADEE68",
            "DATAPAYLOAD": "<AVAILABILITY>\n  <CODE>200</CODE>\n  
            <INSTOCKVALUE>INSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
        }
    ]
}

Thank you again.

Answer 1

You probably wanted console.log("failed"); outside of the for loop like the following (so that it only executes once all the data is processed):

onButtonClicked = () => {
        const idsent="D56F36C6038DFC8244F"
        for (var i = 0; i < Data.response.length; i++) {
            if (Data.response[i].id === idsent) {
                name = Data.response[i].DATAPAYLOAD;
                const word = '<INSTOCKVALUE>INSTOCK</INSTOCKVALUE>';
                if (name.includes(word)) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
        console.log("failed");

Answer 2

When the fetch is successful, You need to read and parse the data using json(). Pleas read this

    onButtonClicked = async () => {
        const idsent="D56F36C6038DFC8244F"
        Data = await Data.json();  // json() will create a promise
        for (var i = 0; i < Data.response.length; i++) {
            if (Data.response[i].id === idsent) {
                name = Data.response[i].DATAPAYLOAD;
                const word = '<INSTOCKVALUE>INSTOCK</INSTOCKVALUE>';
                if (name.includes(word)) {
                    return true;
                }
                else {
                    return false;
                }
            }
            console.log("failed");
        }

Answer 3

The reason you get failed, is because the first time through, the ID does not match the one sent, so it console logs the "failed" message. Then the second time through the for loop it matches the data, and then hits the next if, which checks for the value. Since the value you are searching for is included in the data, it returns true and the for loop is exited. The reason you see the fail log is because you are logging when the id doesn't match and there are 3 records in that array where the id don't match, the first one being one of them.