どのul li idをクリックしたかに基づいてjsonからデータを取得するにはどうすればよいですか？

Question

これはウェブサイトのための私の最初のプロジェクトですが、私はチュートリアルを何度も見ているにもかかわらず、始める方法がわからないので、これを尋ねることにしました。

私は、このJSONオブジェクトの多くでいっぱいにしたいと私はpostIdことによって、これを取得したいこの

{ 
"posts": [{ 
    "id": 1, 
    "postId": 1, 
    "img":"", 
    "title": "" 
}] 
} 

のようなこの

<li><a href="posts.html?id=1">Data for id 1</a></li> 
<li><a href="posts.html?id=2">Data for id 2</a></li> 

そしてjson.fileのようなULリストアイテムを持っています

私はid /どのように私は見つける角度/リアクトと私はまだ基​​本的なJS/Ajaxを学んでいると考えていない

私はliを？id = 1 ...をクリックして "postId"ですべてのjsonデータを取得する場合

Answer 1

この質問は非常に幅広いですが、

あなたがHTMLの構造がわずかに変化する場合、それは容易になるだろう：

<li><a href="" data-id="1">Data for id 1</a></li> 
<li><a href="" data-id="2">Data for id 2</a></li> 

その後、あなたはクリックハンドラを追加するために、JSのビットを追加することができます。ここではjQueryを使用しますが、純粋なJS、React、Angular、またはあなたの心が望むものを使って簡単にこれを行うことができます。

$('a').on('click', function(ev) { 
    ev.preventDefault(); 
    $.get('/posts.php', {id: $(this).data('id')}).then(res => { 
     console.log(res); 
    }); 
}); 

基本的に、我々はページ上のすべての<a> sのクリックハンドラを追加している（あなたはより具体的には、クラスを使用する必要があります）、その後、我々が読み出しidに沿って通過する、an ajax requestをオフに発射しますdata-id。

サーバー上では、JSONファイルを解析し、興味のあるデータを返すスクリプトを作成する必要があります。私はあなたに始めてみるために少しのPHPを提供しますが、

$json = json_decode(file_get_contents('yourfile.json')); 
foreach($json['posts'] as $post) { 
    if($post['id'] == $_GET['id']) { 
     echo json_encode($post); 
     exit; 
    } 
} 

をそして、あなたが実際にあなたがそれをフェッチした後、そのデータをどうしたいのかを決定する必要があり：Node.jsのか、他のサーバーサイド言語でこれを行います。ここでは、Chrome/Firefox DevToolのコンソールにログオンしましたが、おそらくそれをユーザーに何とか表示したいと思うでしょう。