OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

SyntaxError: Unexpected end of input when parsing API data

  • Thread starter Thread starter Kunguma Sakthivel
  • Start date Start date
K

Kunguma Sakthivel

Guest
I am trying to develop an browser extension, after calling my weather API when I try to parse the JSON data, it raise error in console like:

SyntaxError: Unexpected end of input (at script.js:36:30) at HTMLButtonElement.fetchData (script.js:36:30)

I need to parse the promise object from the weather API to show the weather information in my browser extension

Code:
function developContainer(data) {
    let con = document.getElementById('info-container');
    con.innerHTML = '';
    let newPc = document.createElement("p");
    let newPf = document.createElement("p");
    newPc.innerHTML = "C°/" + data.temp_c;
    newPf.innerHTML = "F°/" + data.temp_f;
    con.appendChild(newPc);
    con.appendChild(newPf);
}

async function fun() {
    let input = document.getElementById('input');
    input.value = 'loading...';
    let res = await fetch('https://ipapi.co/json/', {method: "GET"});
    let json =await res.json();
    city = json.city;
    input.value = city;
    console.log(city);    
}

async function fetchData() {
    // if(city === '') return;
    let inputEle = document.getElementById("input");
    let location = inputEle.value;
    console.log(location);
    let url = `https://api.weatherapi.com/v1/forecast.json?key=7afae986719f43e0b91135851240406&q=${location}`
    if(location === '') return;
    try{
        // let res = await fetch(
        //     `https://api.weatherapi.com/v1/forecast.json?key=7afae986719f43e0b91135851240406&q=${location}`,
        //     {
        //         mode: "no-cors",
        //         method: "GET"
        //     }
        // );
        let res = await fetch(url, {method: "GET", mode: "no-cors"});
        let json = await res.json();
        console.log(json);
        let data = json.current;
        developContainer(data);

        console.log(json.current.temp_c);
    } catch(e) {
        console.log(e);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('button').addEventListener('click', fetchData, false);
}, false)

fun();

<p>I am trying to develop an browser extension, after calling my weather API when I try to parse the JSON data, it raise error in console like:</p>
<blockquote>
<p>SyntaxError: Unexpected end of input (at script.js:36:30) at HTMLButtonElement.fetchData (script.js:36:30)</p>
</blockquote>
<p>I need to parse the promise object from the weather API to show the weather information in my browser extension</p>
<pre><code>function developContainer(data) {
let con = document.getElementById('info-container');
con.innerHTML = '';
let newPc = document.createElement("p");
let newPf = document.createElement("p");
newPc.innerHTML = "C&deg;/" + data.temp_c;
newPf.innerHTML = "F&deg;/" + data.temp_f;
con.appendChild(newPc);
con.appendChild(newPf);
}

async function fun() {
let input = document.getElementById('input');
input.value = 'loading...';
let res = await fetch('https://ipapi.co/json/', {method: "GET"});
let json =await res.json();
city = json.city;
input.value = city;
console.log(city);
}

async function fetchData() {
// if(city === '') return;
let inputEle = document.getElementById("input");
let location = inputEle.value;
console.log(location);
let url = `https://api.weatherapi.com/v1/forecast.json?key=7afae986719f43e0b91135851240406&q=${location}`
if(location === '') return;
try{
// let res = await fetch(
// `https://api.weatherapi.com/v1/forecast.json?key=7afae986719f43e0b91135851240406&q=${location}`,
// {
// mode: "no-cors",
// method: "GET"
// }
// );
let res = await fetch(url, {method: "GET", mode: "no-cors"});
let json = await res.json();
console.log(json);
let data = json.current;
developContainer(data);

console.log(json.current.temp_c);
} catch(e) {
console.log(e);
}
}

document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', fetchData, false);
}, false)

fun();

</code></pre>
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top