Блог

Главная - Вопросы по программированию - Как распечатать данные JSON с картой в компоненте array React

Как распечатать данные JSON с картой в компоненте array React

#javascript #json #reactjs

#javascript #json #reactjs

Вопрос:

У меня есть такой массив в файле данных React, и я использую .map() метод для загрузки данных JSON в компоненте ProjectItem.js .

Какой наиболее эффективный способ печати вложенного объекта JSON? Теперь я хочу напечатать заголовок в массиве проектов, чтобы я мог его отладить, показать в браузере. Я не вижу <div className="title"></div> в инспекторе, какая правильная функция?

Data.json

 {
"projects": [
    {
        "title": "Projecttitle1",
        "category": "frontend development",
        "description": "",
        "desktop": [],
        "mobile": []
    }
  ]
}

ProjectItem.js

 import React from 'react';
import './ProjectItem.scss';
import useWindowWidth from '../../Hooks/useWindowWidth.js';
import { projects } from '../../data'

import desktopImage from '../../Assets/Images/Projects/Desktop/123.jpg';
import mobileImage from '../../Assets/Images/Projects/Mobile/123_square.jpg'


const ProjectItem = ({ viewProject }) => {

const imageUrl = useWindowWidth() >= 650 ? desktopImage : mobileImage;

const { windowWidth } = useWindowWidth();
return(
    <div className="projectItem" style={{ backgroundImage: `url(${ imageUrl })`}}>
        {windowWidth >= 650 amp;amp;( 
            <>
            <div className="title">
                {projects.map((data, key)=>{
                        console.log(key);
                    return(
                        <div key={key}>
                        {data.title}
                        </div>
                    );
                })} 
            </div>
            <div className="viewProject">{viewProject}</div>
            </>
        )}  
    </div>
    );
}; 

export default ProjectItem

Консоль:

пусто

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

1. Вы получаете данные projects ? Можно ли поместить журнал перед картой и проверить один раз?

2. Привет, Даршна, я пробовал {console.log(json.projects.title)} и ` {console.log (projects [0].title)}`, чтобы проверить один раз, данные журнала не отображаются: (

3. Я попробовал {console.log("title" projects[0].title)} , и на консоли появляется запись данных Projecttitle1, пожалуйста, если кто-нибудь может направить меня на правильный путь для печати с помощью функции map

Ответ №1:

Я предполагаю, что это что import { projects } from '../../data' -то вроде этого:

 export const data = {
  projects: [
    {
      title: "Project title 1",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    }
  ]
};

Поэтому, когда вы сопоставляете этот объект, вам нужно ссылаться на projects свойство следующим data.projects.map() образом.

Пример:

data.js

 export const data = {
  projects: [
    {
      title: "Project title 1",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    },
    {
      title: "Project title 2",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    }
  ]
};

App.js

 import React from "react";

import { data } from "./data";

export default function App() {
  return (
    <div>
      {data.projects.map((project, key) => {
        return <p key={key}>{project.title}</p>;
      })}
    </div>
  );
}

Я тоже создал codesandbox.