Practice Code
JavaScript Example (Program)
Learn Details

What is JavaScript fetch() Method ?


fetch() एक प्रकार का function है जिसका use ajax की तरह httpRequest को भेजने और httprespones को recived करने के लिए use किया जाता है। |

Q. what is the benefit uses for fatch api ?

ajax के अपेक्षा fetch api का use करना ज्यादा easy है और इसका code भी छोटा होता है। इसलिए यह ज्यादा useful है

Q. How to work of fetch api ?

हमलोग जानते हैं की किसी भी promise method को access करने के लिए then method के साथ-साथ call back function का भी use करना पड़ता है।

fetch api भी promise को return करता है। इसलिए fetch api को access करने के लिए दो then method के साथ दो callback function का use करना पड़ता है

Syntax for create "fetch()" method :

fetch(url).then(function(parameter_for_response){
return parameter_for_response
) .then(function(parameter_for_response){
//your statement for display data
)

Example 1 : Access Text (Json file) File



<script>     
             myfunc = ()=>{
               fetch("data.txt").then((x)=>{
                console.log(x)
                if(x.ok == true){
                    return x.text()
                }
                else{
                   return x.statusText;  
                }

               }).then((y)=>{
                    console.log(y)
                    document.querySelector(".my-data").innerHTML = y;
               }).catch((error_mag)=>{
                    console.log(error_mag)
               })
            }
</script>

Example 2 : Display data by table



<script>     
             myfunc = ()=>{
               fetch("data.txt").then((x)=>{
                console.log(x)
                if(x.ok == true){
                    return x.json()
                }
                else{
                   return x.statusText;  
                }

               }).then((y)=>{

                    console.log(y)
                    //console.log(y[2].name)
                    let mytable = document.querySelector(".data-list");
                    for(let i =0; i<y.length; i++){
                        var mytr = `<tr>
                                        <th>${y[i].id}</th>
                                        <th>${y[i].name}</th>
                                        <th>${y[i].email}</th>
                                        <th>${y[i].age}</th>
                                        <th>${y[i].salary}</th>
                            </tr>`;
                            mytable.innerHTML +=mytr;
                    }
                                     
                 

               }).catch((error_mag)=>{
                    console.log(error_mag)
               })
            }
</script>

supporting file : data.txt


   
[
    {
        "id" : 1,
        "name" : "Ram Kumar",
        "email" : "ram@gmail.com",
       "age" : 35,
        "salary" : 35000
    },
    {
        "id" : 2,
        "name" : "Ramesh Kumar",
        "email" : "ramesh@gmail.com",
       "age" : 25,
        "salary" : 25000
    },    
    {
        "id" : 3,
        "name" : "suresh Kumar",
        "email" : "suresh@gmail.com",
       "age" : 20,
        "salary" : 20000
    },
    
    {
        "id" : 4,
        "name" : "Ganesh Kumar",
        "email" : "Ganes@gmail.com",
       "age" : 30,
        "salary" : 30000
    },
    
    {
        "id" : 5,
        "name" : "Manohar Kumar",
        "email" : "manohar@gmail.com",
       "age" : 27,
        "salary" : 27000
    }
]