Блог

Главная - Вопросы по программированию - Цикл реагирования через объект json и отображение данных

Цикл реагирования через объект json и отображение данных

#json #reactjs

#json #reactjs

Вопрос:

У меня есть демонстрация здесь

У меня есть простой файл json, который я импортирую, и я хотел бы выполнить цикл и вывести данные json в div

Я, вероятно, захочу выделить части json, но пока мне просто нужно иметь возможность выводить json

Нужно ли мне создавать массив из данных json, а затем сопоставлять его.

 const showProductData = Object.keys(ProductData).map(function(key) {
  return <div>{ProductData[key]}</div>;
});

const App = () => {
  return (
    <div>
      <h2>JSON</h2>
      {showProductData}
    </div>
  );
};

Комментарии:

1. вы пробовали свой код? для меня это выглядит в основном правильно. в отдельном примечании вы также можете перебирать значения объекта: Object.values(data).map(d => <div>{d}</div>) или записи объекта: Object.entries(data).map([key, value] => ()) — кроме того, вам, вероятно, придется указать div в функции map ключ prop reactjs.org/docs/lists-and-keys.html

Ответ №1:

Если вы прочитаете сообщение об ошибке, объекты недействительны как дочерние объекты React. Чтобы изменить ваш текущий код, чтобы просто отображать json, вам нужно будет преобразовать объект в строку.

 const showProductData = Object.keys(ProductData).map(function(key) {
  return <div>{JSON.stringify(ProductData[key])}</div>;
});

Чтобы быть более кратким с тем, к чему мы обращаемся, мы можем вместо этого использовать Object.values() вместо:

 const showProductData = Object.values(ProductData).map(function(value) {
  return <div>{JSON.stringify(value)}</div>;
});

Для дальнейшего доступа к определенным точкам данных вы можете использовать точечную нотацию для доступа к примитивным значениям:

 const showProductData = Object.values(ProductData).map(function(value) {
  return <div>Weight: {value.ProductWeight}</div>;
});

Ответ №2:

ну, когда я показываю вам вопрос, я сразу подумал «рекурсивное решение» 🙂 итак, в основном это код, я попытался объяснить его, не стесняйтесь вникать в него

 function getAllProps(obj) {
  let value = obj;

  // in case it is an object / array, which true, at any json file, at least at the beginning
  if (typeof obj === "object") {
    value = Object.keys(obj).map(key => {
      // and then check again if the value of the 'key' is an object
      // because we cant just out put object in react
      if (typeof obj[key] === "object") {
        // then out put the key name (property, 'ProductOne' for example)
        // and call the function again since we know it is an object.
        // basiclly the function will call it self again and again
        // until the value will be different than 'object'
        return (
          <div key={key}>
            <div style={{ marginLeft: 20 }}>
              <strong> {key} </strong>
              {getAllProps(obj[key])}
            </div>
          </div>
        );
      }

      return (
        <div key={key} style={{ marginLeft: 20 }}>
          {key}: {obj[key]}
        </div>
      );
    });
  }

  return value;
}

const products = getAllProps(ProductData);

const App = () => {
  return (
    <div>
      <h2>JSON</h2>
      {products}
    </div>
  );
};

на самом деле, просто проверьте эту ссылку

прочитайте комментарии, попытайтесь понять мое «рекурсивное решение»