Есть ли способ прочитать локальный массив JSON в ES6?

Question

Привет всем, кто прочитает это! Хотел бы заранее поблагодарить за любую помощь или направление к дальнейшим исследованиям этого topi c, так как я не уверен, что полностью понимаю logi c.

Я создаю приложение для реагирования который использует компонент кнопки и получает его свойства из внешнего, но локального массива JSON, состоящего из имен. Например:

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>
            }}
        );
    }
}

А массив JSON выглядит так:

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

Это упрощенный пример того, что я пытаюсь сделать, однако ожидаемый результат от моего перспектива заключается в том, что функция сопоставления должна перебирать массив JSON и присваивать каждую переменную buttonName, которая затем будет использоваться для создания 6 различных кнопок с внутренним HTML, заполненным содержимым элемента массива.

Однако программа выдает ошибку, в которой говорится, что map не экспортируется из массива JSON, почему это должно быть в первую очередь? Разве программа не должна просто импортировать его и обрабатывать как стандартный массив, который имеет встроенные методы JS, такие как map и forEach

Я пробовал работать с файл как CSV и импорт с использованием D3, однако он возвращает обещание, которого я бы предпочел не иметь, поскольку я использую его для загрузки пользовательского интерфейса, а файл, содержащий buttonNames, не особенно велик. Использование JSON.parse() также не работает, поскольку программа заявляет, что цель уже является объектом.

Ценю и открыты для любых предложений!

Answer 1

Это касается вашего оператора импорта.

при обработке файла JSON в js он был преобразован в js, который экспортирует данные.

[1,2,3]

с

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

с

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

, поскольку он рассматривается как модуль ES, поэтому вы импортируете объект вместо самого массива, поэтому функция карты будет undefined, поскольку это просто простой объект .

Вот почему

загрузка Webpack JSON с json -загрузчиком , который официально поддерживается, вам не нужно настраивать самостоятельно, и json -загрузчик будет обрабатывать файлы JSON путем преобразования его в строку и объединения с исходным кодом module.exports=, здесь , поэтому JSON будет в js, например

module.exports = [0,1,2]

и как Сам объект module.exports будет импортирован как экспорт default в файл ESM, и все поля объектов будут экспортированы как другие, поэтому вы получите объект ESM при выполнении import * as data from "./data.json"

Конечно, если вы используете другой JSON загрузчик, значение будет другим, но вы встретите ошибку.

Answer 2

Да, вы правы, массив JSON должен рассматриваться как собственный в JS. Это. Вам не нужно менять свой JSON. Проблема в синтаксисе import *, не используйте его. Вместо этого:

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

, который будет без проблем импортирован Webpack.

Answer 3

Рабочая демонстрация

Json файл

{
  "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>
  );
}

Answer 4

Обычный JSON не поддерживает массивы. Попробуйте:

{
  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>
            }}
        );
    }
}