Как я могу нанести на карту объект, который содержит другой объект, который я хочу отобразить, и вернуть из него JSX? - PullRequest
Новая
       0

Как я могу нанести на карту объект, который содержит другой объект, который я хочу отобразить, и вернуть из него JSX?

0 голосов
/ 15 ноября 2018

Моя проблема

У меня есть объект mockdata, который выглядит следующим образом: 

topicGroups: {
    0: {
      title: "Languages",
      topics: {
        0: {
          title: "Javascript",
          description: "Everything about Vanilla JS",
          latestTopic:
            "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
        },
        1: {
          title: "C#",
          description: "Microsoft's go to language",
          latestTopic: "Main geiles Topic alter"
        }
      }
    },
    1: {
      title: "Coding Partner Search",
      topics: {
        0: {
          title: "Suche nach Liebe",
          description: "Everything about Vanilla JS",
          latestTopic:
            "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
        }
      }
    }
  }

Я хочу добиться следующего:

  • Карта по всем темамгруппы (чтобы получить доступ к строке title и объекту topics.
  • Карта поверх объекта topics внутри первой карты (так что я нахожусь в области видимости названия группы)
  • Вернуть Jsx, где я использую только название группы и текущую тему title и description

Я попробовал это с несколькими функциями lodash, но я не могу заставить его работать.Я должен был создать еще один свежий объект, кроме topicGroups, но тогда трудно определить, какие темы относятся к каким тематическим группам.

Пример того, как я хочу использовать jsx и что я хочу вернуть: 

return groups.map(group =>
      group.topics.map(topic => {
        return (
          <ForumTopicGroup title={group.title}>
            <ForumTopic>{topic.title}</ForumTopic>
          </ForumTopicGroup>
        );
      })
    );

Каков наилучший и самый чистый способ добиться этого?

Причина, по которой мои данные похожи только на объект вместо использования массивов, заключается в том, что, потому что я хочу работать с этими данными, как будто они получены из firebase (как я буду использовать ельebase позже в приложении

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Я написал для этого небольшую функцию JS, надеюсь, вы сможете использовать ее и конвертировать в JSX. 

let data = {
  0: {
    title: "Languages",
    topics: {
      0: {
        title: "Javascript",
        description: "Everything about Vanilla JS",
        latestTopic:
          "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
      },
      1: {
        title: "C#",
        description: "Microsoft's go to language",
        latestTopic: "Main geiles Topic alter"
      }
    }
  },
  1: {
    title: "Coding Partner Search",
    topics: {
      0: {
        title: "Suche nach Liebe",
        description: "Everything about Vanilla JS",
        latestTopic:
          "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
      }
    }
  }
};

Object.keys(data).forEach(key => {
  let { title, topics } = data[key];
  Object.keys(topics).forEach(key => {
    console.log(`Topic title -> ${topics[key].title}`, `Group title -> ${title}`);
  });
});
0 голосов
/ 15 ноября 2018

Это сработало бы так, как будто вы написали это в своем вопросе, если бы вы могли использовать массивы, но поскольку у объектов нет метода map, вы могли бы использовать Object.entries вместо того, чтобы перебирать всепары ключ-значение в объектах.

Пример 

const groups = {
  0: {
    title: "Languages",
    topics: {
      0: {
        title: "Javascript",
        description: "Everything about Vanilla JS",
        latestTopic:
          "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
      },
      1: {
        title: "C#",
        description: "Microsoft's go to language",
        latestTopic: "Main geiles Topic alter"
      }
    }
  },
  1: {
    title: "Coding Partner Search",
    topics: {
      0: {
        title: "Suche nach Liebe",
        description: "Everything about Vanilla JS",
        latestTopic:
          "Diskussion] Der ideale asdf Gaming-PC er ideale asdf Gamin(1..."
      }
    }
  }
};

function App() {
  return (
    <div>
      {Object.entries(groups).map(([groupKey, group]) => (
        <div key={groupKey}>
          {Object.entries(group.topics).map(([topicKey, topic]) => {
            return (
              <div key={topicKey}>
                {group.title} - {topic.title}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>
...