I'm unable to get the id from the JSON object in Next Js API

Question

data.js inside API folder

export default {

    Trending : [
    
        {
    
            "data":[
    
           
    
           {
    
           
    
            "id":1,
    
           
    
            "attributes":{
    
           
    
            "Title":"Technical",
    
           
    
            "slug":"blog",
    
           
    
            "Description":"#Python\nPythonisasimplelanguageforstarters.",
    
           
    
            "Date":"2023-03-06",
    
           
    
            "Author":"Ankush",
    
           
    
            "createdAt":"2023-03-06T03:11:19.450Z",
    
           
    
            "updatedAt":"2023-03-06T03:11:21.956Z",
    
           
    
            "publishedAt":"2023-03-06T03:11:21.951Z",
    
           
    
            "locale":"en"
    
           
    
           }
    
           
    
           }
    
           
    
           ],
    
           
    
            "meta":{
    
           
    
            "pagination":{
    
           
    
            "page":1,
    
           
    
            "pageSize":25,
    
           
    
            "pageCount":1,
    
           
    
            "total":1
    
           
    
           }
    
           
    
           }
    
           
    
           }
    
    ]

}

trending.js

import data from './data'

// api/trending

export default function handler(req, res){

    const { Trending } = data;
    
    if(Trending) return res.status(200).json(Trending)
    
    return res.status(404).json({ error: "Data Not Found"})

}

**\[postId.js\]**

import data from "../data"

export default function handler(req,res){

    const{ postId }= req.query;
    
    const { Trending } = data;
    
    
    
    if(postId){
    
        const post = Trending.find( (value) => value.id == postId)
    
        return res.status(200).json(post)
    
    }
    
    
    
    return res.status(404).json({ error:"Post Not Found"})

}

In the slug file, [postId] I'm trying to get the id:1 which is inside the data.js. But I unable to get it

I'm working on this Next Js blog where I have to get the details from JSON id which have, problem is when I use find inside [postId].js file its not returning the object but there is no error I mean the object is not coming in. So help me to do it in a right way to access the data.

score 0 · Answer 1 · answered Mar 27 '23 at 10:52

Please fix your code formatting.

Your name file should be [postId].js and locate under pages/post/ folder.

Try the code below:

import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const { postId } = router.query;
  console.log("postId", postId);

  return ...;
};

export default Post;

Test it with localhost:YOUR_OWN_PORT/post/1

score 0 · Answer 2 · answered Mar 27 '23 at 10:53

Your id property is in the wrong place

export default {
  Trending: [
    {
      id: 1,
      data: [
        {
          "attributes": {
            "Title": "Technical",
            "slug": "blog",
            "Description": "#Python\nPythonisasimplelanguageforstarters.",
            "Date": "2023-03-06",
            "Author": "Ankush",
            "createdAt": "2023-03-06T03:11:19.450Z",
            "updatedAt": "2023-03-06T03:11:21.956Z",
            "publishedAt": "2023-03-06T03:11:21.951Z",
            "locale": "en"
          }
        }
      ],
      "meta": {
        "pagination": {
          "page": 1,
          "pageSize": 25,
          "pageCount": 1,
          "total": 1
        }
      }
    }
  ]
}

Then use "find" in you "[postId].js" to get the post with the matching id

import data from "../data"

export default function handler(req, res) {
  const { postId } = req.query;
  const { Trending } = data;
  
  if (postId) {
    const post = Trending.find((value) => value.id == postId)
    if (post) {
      return res.status(200).json(post)
    } else {
      return res.status(404).json({ error: "Post Not Found" })
    }
  }
  
  return res.status(404).json({ error: "Post Not Found" })
}

I'm unable to get the id from the JSON object in Next Js API

2 Answers2