Home Can't connect to JSON file using AJAX
Reply: 1

Can't connect to JSON file using AJAX

cosmichero2025
1#
cosmichero2025 Published in 2018-01-12 17:35:07Z

I'm making a javascript web app that takes the user's input about what font the want to check out from the google fonts API. I can't seem to connect to the google fonts api. I'm using the default code they have on their developer site.

https://developers.google.com/fonts/docs/developer_api

I'm trying to connect to this JSON file here

https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyCKDRrItgVcxrwi8AZwgqMnK4hyEC5tCoY

My AJAX code

function getFont(fontUrl) {

    var googleFontAPI = "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyCKDRrItgVcxrwi8AZwgqMnK4hyEC5tCoY";

    $.getJSON(googleFontAPI, function (data) {
        var apiUrl = [];
        apiUrl.push('https://fonts.googleapis.com/css?family=');
        apiUrl.push(anonymousPro.family.replace(/ /g, '+'));
        if (contains('italic', anonymousPro.variants)) {
            apiUrl.push(':');
            apiUrl.push('italic');
        }
        if (contains('greek', anonymousPro.subsets)) {
            apiUrl.push('&subset=');
            apiUrl.push('greek');
        }

        // url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
        var url = apiUrl.join('');
        console.log(url);
    });
}

When I try to run the code it returns this error message

Taha Azzabi
2#
Taha Azzabi Reply to 2018-01-12 18:57:25Z

I think you should search in JSON result to see if font exist in Google font API, then combine the information of variable "fontObject" (in your exemple called anonymousPro) to create a Fonts API request.

async function getFont(fontObject) {

        var googleFontAPI = "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyCKDRrItgVcxrwi8AZwgqMnK4hyEC5tCoY";
        let url = null;
        await $.getJSON(googleFontAPI, function (data) {
            let result = data.items;

            if(result.filter( x => x.family === fontObject.family).length > 0){
                var apiUrl = [];
                apiUrl.push('https://fonts.googleapis.com/css?family=');
                apiUrl.push(fontObject.family.replace(/ /g, '+'));
                if (fontObject.variants.includes('italic')) {
                    apiUrl.push(':');
                    apiUrl.push('italic');
                }
                if (fontObject.subsets.includes('greek')) {
                    apiUrl.push('&subset=');
                    apiUrl.push('greek');
                }
                // url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
                url = apiUrl.join('');                  
            }
        });
        console.log(url)
        return url
    }

    let fontObject = {
            family: 'Anonymous Pro',
            variants: 'italic',
            subsets: 'greek'
        }

    getFont(fontObject).then(url => {
       console.log(url)
    })
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.308201 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO