Hi to whoever may read this! Would like to thank in advance any help or direction towards further research into this topic as I'm not sure I fully understand the logic.

I'm creating a react app which uses a button ponent and gets it's props from an external but local JSON array made up of names. For instance:

import React from 'react';
import * as buttonNames from '/localdirectory/buttonNames.json';

class Buttons extends React.Component {
    render() {
        return (
            {buttonNames.map((buttonName, i) => {
                return <button>{buttonName}</button>
            }}
        );
    }
}

And the JSON array looks like this:

[
"10A",
"10B",
"10C",
"10D",
"10E",
"10F"
]

This is a simplified example of what I'm trying to do however the expected result from my perspective is that the mapping function should iterate through the JSON array and assign each to the buttonName variable which would then be used to create 6 different buttons with the innerHTML filled by the content of the array item.

However the program throws an error which states that map is not exported from the JSON array, why would it need to be in the first place? Shouldn't the program be simply importing it and treating it as a standard array which has built-in JS methods such as map and forEach

I've tried working with the file as a CSV and importing using D3, however that returns a promise which I'd prefer not to be the case as I'm using it load the UI and the file which contains the buttonNames isn't particularly large. Using JSON.parse() also does not work as the program states that the target is already an object.

Appreciate and open to any suggestions!

Hi to whoever may read this! Would like to thank in advance any help or direction towards further research into this topic as I'm not sure I fully understand the logic.

I'm creating a react app which uses a button ponent and gets it's props from an external but local JSON array made up of names. For instance:

import React from 'react';
import * as buttonNames from '/localdirectory/buttonNames.json';

class Buttons extends React.Component {
    render() {
        return (
            {buttonNames.map((buttonName, i) => {
                return <button>{buttonName}</button>
            }}
        );
    }
}

And the JSON array looks like this:

[
"10A",
"10B",
"10C",
"10D",
"10E",
"10F"
]

This is a simplified example of what I'm trying to do however the expected result from my perspective is that the mapping function should iterate through the JSON array and assign each to the buttonName variable which would then be used to create 6 different buttons with the innerHTML filled by the content of the array item.

However the program throws an error which states that map is not exported from the JSON array, why would it need to be in the first place? Shouldn't the program be simply importing it and treating it as a standard array which has built-in JS methods such as map and forEach

I've tried working with the file as a CSV and importing using D3, however that returns a promise which I'd prefer not to be the case as I'm using it load the UI and the file which contains the buttonNames isn't particularly large. Using JSON.parse() also does not work as the program states that the target is already an object.

Appreciate and open to any suggestions!

• javascript
• json
• reactjs
• ecmascript-6
• import

Share Improve this question Follow edited Jun 21, 2020 at 13:01 Mister Jojo 22.6k66 gold badges2525 silver badges4444 bronze badges asked Jun 21, 2020 at 12:52 Paul McGlincheyPaul McGlinchey 3399 bronze badges 3

• Have you tried importing the JSON file with import buttonNames from '/localdirectory/buttonNames.json'; – sebastian-ruehmann Commented Jun 21, 2020 at 13:05
• Hello, are you exporting that array?? I can't see anywhere you are exporting it. – Mwibutsa Floribert Commented Jun 21, 2020 at 13:06
• 1 The import seems to be working fine from what I can see, console.logging the type and the imported array displays what I want but I will try exporting it explicitly. @Mwibutsa – Paul McGlinchey Commented Jun 21, 2020 at 13:14

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

It's about your import statement.

while handling JSON files in js, it's been turned into a js that export data.

[1,2,3]

with

import data from "./data.json"
console.log(data) // [1,2,3]

with

import * as data from "./data.json"
console.log(data) // {0:1,1:2,2:3, default:[1,2,3]}

as it's been treated as ES module, you import an object instead of the array itself, so the map function will be undefined, as it's just a plain object.

---

Here's why

Webpack load JSON with json-loader, which is officially supported so that you won't need to configure yourself, and the json-loader will handle JSON files by stringify it and concat with module.exports=, source code here, so the JSON will be in js like

module.exports = [0,1,2]

and as the module. exports object itself will be imported as default export in an ESM file, and all objects fields will be exported as others, so you will get an ESM object while doing import * as data from "./data.json"

Of cause, if you are using a different JSON loader the value will be different, but the error is what you meet.

Yes you're right, JSON array should be treated as native in JS. It is. You don't have to change your JSON. Problem is the import * syntax, do not use it. Instead:

     import buttonNames from '/localdirectory/buttonNames.json';

Which will be imported smoothly by Webpack.

Plain JSON does not Support Arrays. Try:

{
  0: "10A",
  1: "10B",
  2: "10C",
  3: "10D",
  4: "10E",
  5: "10F"
}

import React from 'react';
import buttonNames from '/localdirectory/buttonNames.json';

class Buttons extends React.Component {
    render() {
        return (
            {Object.values(buttonNames).map((buttonName, i) => {
                return <button>{buttonName}</button>
            }}
        );
    }
}

Working demo

Json file

{
  "data": ["10A", "10B", "10C", "10D", "10E", "10F"]
}

JSX

import React from "react";
import "./styles.css";
import { data } from "./myJson.json";

export default function App() {
  console.log(data);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {data.map(d => (
        <p>{d}</p>
      ))}
    </div>
  );
}