Fetch json chrome

Question

I'm having trouble consuming data from a json file on my local machine, I tried everything I read, but without success ...

Follow my code

Fetch API cannot load file:category.json. URL scheme must be "http" or "https" for CORS request. (anonymous) @ main.js:69 main.js:69 Uncaught (in promise) TypeError: Failed to fetch

Follow my code

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" media="all">
</head>
<body>
  
  <section id="ranking"></section>

  <script src="main.js"></script> 
</body>
</html>

(() => {
    'use strict';


    const calcPercentage = (negative, positive) => {
        negative = null || undefined !== negative ? Number(negative) : 0;
        positive = null || undefined !== positive ? Number(positive) : 0;

        let total = negative + positive;

        return {
            negative: 0 !== total ? Math.floor((negative / total) * 100) : 0,
            positive: 0 !== total ? Math.floor((positive / total) * 100) : 0
        }
    };

    const changeItems = items => {
        let percent;

        return items.map(curr => {
            percent = calcPercentage(curr.negative, curr.positive);
            curr.negative = percent.negative;
            curr.positive = percent.positive;

            return curr;
        });
    };

    const sortItems = items => {
        items.sort((a, b) => {
            if (a.positive > b.positive) {
                return -1;
            }
            return 1;
        })

        return items;
    };

    const displayData = (data, parentEl) => {
        const elements = [];
        parentEl = document.getElementById(parentEl);

        data.forEach((item, index) => {
            elements.push(`
                <div class="celebrity">
                    <h3>${item.name}</h3>
                    <p>${item.description}</p>
                    <div class="tooltip">
                        <div class="option">
                            <span class="left-radius right-pipe">OK</span>
                            <p class="left-radius right-pipe">${item.positive}%</p>
                        </div>
                        <div class="option">
                            <span class="right-radius">Don't</span>
                            <p class="right-radius">${item.negative}%</p>
                        </div>
                    </div>
                </div>
            `);
        });

        parentEl.innerHTML = elements.join('');
    };


    fetch('category.json',{
        method: 'GET', 
        headers:{
            'Access-Control-Allow-Origin':'*',
            "Content-Type": "text/plain"
        }
    })
        .then(response => response.json())
        .then(data => changeItems(data.data))
        .then(data => sortItems(data))
        .then(data => displayData(data, 'ranking'))
})();

Does your web page url read localhost for file:///. If the later then the browsers block all not web server access. You must run your code on a web server. — user2417483
In addition to @jeff's comment, programs like XAMPP can be used to simulate a web server. — user4616966
Just set up small web server, so you can access page from localhost. You don't have to install XAMPP, for example Sublime Text and other text editors have plugins for it. — Artur
So ... all this code and the problem is nothing to do with any of it ... lol — Jaromanda X

Kamal Kamal · Accepted Answer · 2017-09-23T00:42:33

(() => {
    'use strict';


    const calcPercentage = (negative, positive) => {
        negative = null || undefined !== negative ? Number(negative) : 0;
        positive = null || undefined !== positive ? Number(positive) : 0;

        let total = negative + positive;

        return {
            negative: 0 !== total ? Math.floor((negative / total) * 100) : 0,
            positive: 0 !== total ? Math.floor((positive / total) * 100) : 0
        }
    };

    const changeItems = items => {
        let percent;

        return items.map(curr => {
            percent = calcPercentage(curr.negative, curr.positive);
            curr.negative = percent.negative;
            curr.positive = percent.positive;

            return curr;
        });
    };

    const sortItems = items => {
        items.sort((a, b) => {
            if (a.positive > b.positive) {
                return -1;
            }
            return 1;
        })

        return items;
    };

    const displayData = (data, parentEl) => {
        const elements = [];
        parentEl = document.getElementById(parentEl);

        data.forEach((item, index) => {
            elements.push(`
                <div class="celebrity">
                    <h3>${item.name}</h3>
                    <p>${item.description}</p>
                    <div class="tooltip">
                        <div class="option">
                            <span class="left-radius right-pipe">OK</span>
                            <p class="left-radius right-pipe">${item.positive}%</p>
                        </div>
                        <div class="option">
                            <span class="right-radius">Don't</span>
                            <p class="right-radius">${item.negative}%</p>
                        </div>
                    </div>
                </div>
            `);
        });

        parentEl.innerHTML = elements.join('');
    };


    fetch('./category.json',{
        method: 'GET', 
        headers:{
            'Access-Control-Allow-Origin':'*',
            "Content-Type": "text/plain"
        }
    })
        .then(response => response.json())
        .then(data => changeItems(data.data))
        .then(data => sortItems(data))
        .then(data => displayData(data, 'ranking'))
})();

Fetch json chrome

1 Answers