1
私は悩み、私が読んですべてを試み、私のローカルマシン上のJSONファイルからデータを消費を抱えている
を取得ファイルをロードすることはできませんAPIを取得する私のコードに従いますが、成功せず...</p> <p>JSONクロム
：category.json。 CORS要求の場合、URLスキームは「http」または「https」でなければなりません。 （匿名）main.js @：69 main.js：69キャッチされない（約束で）例外TypeError：
の取得に失敗しましたが、私のコードに従い
<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'))
})();
あなたのWebページのURLは、file：///のlocalhostを読み取りますか？後であれば、ブラウザはウェブサーバーアクセスではないすべてをブロックします。 Webサーバー上でコードを実行する必要があります。 @ジェフさんのコメントに加えて – jeff
は、XAMPPのようなプログラムは、Webサーバーをシミュレートするために使用することができます。 –
は、ほんの少しのWebサーバーをセットアップするので、あなたは、ローカルホストからのページにアクセスすることができます。あなたは、例えば崇高テキストや他のテキストエディタがそれ用のプラグインを持って、XAMPPをインストールする必要はありません。だから... ...このすべてのコードと問題はそれのいずれかとは何の関係もありません – reski