JavaScript - Error importing JSON that contains array of objects

Question

I'm trying to import JSON file that contains an array of blog-posts. All data contained in JSON file is imported successfully, except the Array of objects (edges)

This code is part of a unit test created with JestJS for a site build with Gatsby.

When I try to access edges array, I get "TypeError: Cannot read property 'edges' of undefined".

JS code:

import data from "./__mocks__/blog.json";

console.log(data);
data.allMarkdownRemark.edges.forEach((post) =>  {
  console.log(post);
})

Console.log(data):

{ data: { allMarkdownRemark: { edges: [Array] } }

My JSON file is formatted as a JSON object, so it is not necessary to use JSON.parse() JSON file:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "id": "c60d0972-1f4a-55ae-b762-c24795fae501",
            "fields": {
              "slug": "/a-tu-cerebro-no-le-gusta-la-innovacion/"
            },
            "frontmatter": {
              "title": "A tu cerebro no le gusta la Innovación",
              "templateKey": "blog-post",
              "date": "September 16, 2017"
            }
          }
        },
        {
          "node": {
            "id": "1624f260-4c77-55d3-8297-4f0ad688f878",
            "fields": {
              "slug": "/la-mente-es-para-tener-ideas-no-para-almacenarlas/"
            },
            "frontmatter": {
              "title": "La mente es para tener Ideas™, no para almacenarlas",
              "templateKey": "blog-post",
              "date": "August 26, 2017"
            }
          }
        }
      ]
    }
  }
}

Do you know how to import correctly "edges" array of objects from JSON file?

Aaron · Accepted Answer · 2020-05-12 11:19:26Z

2

The problem is your variable is called data and inside your json file you also defined data as a key. So you have to use data once as the variable and a second time as the key of the JSON file.

you have to access it like this:

data.data.allMarkdownRemark.edges.forEach((post) =>  {
  console.log(post);
})

Another solution would be to change the structure of your JSON file.

answered May 12, 2020 at 11:19

Aaron

1,7471 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teneff · Accepted Answer · 2020-05-12 12:04:54Z

0

You can:

import { data } from "./__mocks__/blog.json";

answered May 12, 2020 at 12:04

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Collectives™ on Stack Overflow

JavaScript - Error importing JSON that contains array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related