如何根据单击的ul id从json获取数据？

Question

This is my first project for website, but i decide to ask this, because i am not sure how to begin, despite watching countless of tutorials.

I have ul list items like this

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

And json.file like this

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

I want this json to be filled with lots of objects and i want to get this by postId

I have no idea how to id.Everything i find is with Angular/React and i am still learning basic JS/Ajax

So, if i click li with ?id=1...to get all json data with "postId"

Answer 1

That question is pretty broad, but maybe this will help you get started.

It would be easier if you change your HTML structure slightly:

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

Then you can add a bit of JS to add a click handler. I'm going to use jQuery here, but you can just as easily do this with pure JS, React, Angular, or whatever your heart desires.

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

Basically, we're adding a click handler to all <a> s on the page (you should use a class to be more specific), and then firing off an ajax request , passing along the id which we read out of data-id .

Now on the server you're going to have to write a script that parses your JSON file and returns the data you're interested in. I'll give you a bit of PHP to get you started, but you can do this with Node.js or any other server-side language:

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

And then you have to decide what you actually want to do with that data after you've fetched it. Here I've just logged it to Chrome/Firefox DevTool's console, but you'll probably want to display it to the user somehow.