How can I map through a json file and return a single item?

I have a json file for blog posts, the json file will be getting updated from time to time with new items…

I want to map through the json file, then extract just a single item return the values to fill a component props…

The problem??? When I map it, the return is for ALL the items in the list… is there a way I can return just a single item???

*** keep in mind that json will be changing *** I have been trying to tap into the value of the item id… but I haven’t been able to make it work…

The sample code I have is this:

import React from "react";
import Blogger11 from "../../../components/blog-post-english1";

import db from "../../../utils/blogs-front/spanish/blog-spanis1.json";

export async function getStaticProps() {
  return {
    props: { db },
  };
}

const PostTest = ({ db }) => {
  return (
    <div>
      {db.map((item) => {
        return (
          <Blogger11
            key={item.id[1]}
            metaTitle={item.metaTitle}
            metaDescription={item.metaDescription}
            metaKeywords={item.metaKeywords}
            ogTitle={item.ogTitle}
            ogDescription={item.ogDescription}
            ogURL={item.ogURL}
            ogImage={item.ogImage}
            twitterTitle={item.twitterTitle}
            twitterDescription={item.twitterDescription}
            twitterImage={item.twitterImage}
            title={item.title}
            body={item.body}
            description={item.Description}
            previous={item.previous}
            next={item.next}
          />
        );
      })}
      ;
    </div>
  );
};

export default PostTest;

Have you tried reduce?

Reduce will always point to a certain item in the array…

The json file will always be changing… if I add or delete items in the json file it would mess the output of previous posts…

I could create a stand alone json file for each item, and output the value on each page, but then I might just put the values directly on the page…

The reason I would like to keep it all in a single json file is because I am also using the same document to output all the items with certain values in a front blog preview… and because if I keep all the information in a single file it is easy for me to review it as well…

Now, for an independent page blog… I for example would just need to extract that one single item that would always be there regardless if I add or delete items to the json file…

would there be a method or way to tap into for example item.id.4995 ??? that way I know I would always display the item with that specific id regardless if the json file has more or less items…

Huh? Reduce is a method that iterates over the entire array and reduces it down to a single value

The only way you should use map is to create a brand new array out of the contents of an old array.

It sound like you need neither reduce or map? You want to only work with one specific entry of the array? Then just index into the array and use that single value.

1 Like