Comment puis-je obtenir des données à partir de json en fonction de quel utilisateur est cliqué?

Question

Ceci est mon premier projet de site Web, mais je décide de demander cela, parce que je ne suis pas sûr de savoir comment commencer, en dépit de regarder d'innombrables tutoriels.

J'ai des éléments de liste ul comme celui-ci

<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> 

Et json.file comme celui-ci

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

Je veux que ce JSON à remplir avec beaucoup d'objets et je veux obtenir en postId

Je ne sais pas comment je trouve id.Everything est avec angulaire/React et je suis encore à apprendre JS/Ajax base

Donc, si je clique li avec? Id = 1 ... pour obtenir toutes les données json avec "postId"

Answer 1

Cette question est assez large, mais peut-être que cela vous aidera à démarrer.

Il serait plus facile si vous changez votre structure HTML légèrement:

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

Ensuite, vous pouvez ajouter un peu de JS pour ajouter un gestionnaire de clic. Je vais utiliser jQuery ici, mais vous pouvez tout aussi bien le faire avec JS pur, React, Angular, ou tout ce que votre coeur désire.

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

Fondamentalement, nous ajoutons un gestionnaire de clic à tous les <a> s sur la page (vous devez utiliser une classe pour être plus précis), puis tirer hors an ajax request, en passant le long de la id que nous lisons sur data-id.

Maintenant, sur le serveur, vous allez devoir écrire un script qui analyse votre fichier JSON et retourne les données qui vous intéressent. Je vais vous donner un peu de PHP pour vous aider à démarrer, mais vous pouvez faire avec Node.js ou toute autre langue côté serveur:

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

et vous devez décider ce que vous voulez vraiment faire avec ces données une fois que vous avez récupérée, elle. Ici, je viens de me connecter à la console de Chrome/Firefox DevTool, mais vous voudrez probablement l'afficher à l'utilisateur d'une manière ou d'une autre.