개발자로한걸음
435
2021-03-04 10:36:56
4
104

json 일부 파일만 추출하기


뉴스라는 json 파일이 있는데요. 

no, img., title., content,date를 추출해서 뉴스 기사페이지를 만들려고합니다. 

img 1 content 1일때는 쉬웠는데... 

img 와 content 의 내용이 많아지니 어떻게 접근해야할지 모르겠습니다. 

인터뷰 기사처럼 

사진 기사 사진 기사 이렇게 출력하고 싶은데요... 

그러면 news.json에서 img, content만 출력해서 따로 묶음을 만든 뒤에 여기서 하나씩 출력하도록 반복문을 돌려야하나요?? 

news.json
{
"no":"1",
"img":"[
            "../img/new6_1.PNG",
            "../img/new6_2.PNG",
            "../img/new6_3.PNG",
            "../img/new6_4.PNG",
            "../img/new6_5.PNG",
            "../img/new6_6.PNG"
        ],
"title": "[인터뷰]",
"content": [
            "내용1 ",
"내용2 ",
"내용3 ",
"내용4 ",
"내용5 ",
"내용6 ",
],
"date":"2021.03.01" 
},
{
"no":"2",
"img":"[
            "../img/new6_1.PNG",
            "../img/new6_2.PNG",
            "../img/new6_3.PNG",
            "../img/new6_4.PNG",
            "../img/new6_5.PNG",
            "../img/new6_6.PNG"
        ],
"title": "[인터뷰]",
"content": [
            "내용1 ",
"내용2 ",
"내용3 ",
"내용4 ",
"내용5 ",
"내용6 ",
],
"date":"2021.03.04" 
}



이게 제가짠 코드인데,  로직을 어떻게 해야할지 몰라서 일단 지금은 

이미지 덩어리 쭉 나오고,  content덩어리 쭉 나오게 구현했거든요..

이걸 어떻게 이미지 , contnet 이렇게 번갈아가면서 출력할까요?... 

function NewsDetail({ match, history }) {
    const item = newsArticle.find((article) => article.no === match.params.no);// json중에  일치하는 자료만 가져와서, 
    const itemBunch = item.img;  // 이미지 만 가져옴(이미지묶음) 
    const contBuch = item.content;
return (
            <div>
                <div>
                    <ul style={{ listStyle: 'none' }}>
                        <li>
                            <img
                                src={item.img[0]}
                                alt="img"
                                style={{ paddingBottom: '38px' }}
                            />
                        </li>
                        <li style={{ fontWeight: 'bold', fontSize: '20px' }}>
                            {item.title}
                        </li>
                        <li>{item.date}</li>
                        <li style={{ lineHeight: '1.6' }}>{item.content[0]}</li>
                        <li>
                            {item.img.map((img, content) => (
                                <img src={img} alt="img" />
                            ))}
                        </li>
                        <li>
                            {item.content.map((content) => (
                                <span>{content}</span>
                            ))}
                        </li>
</div>
</div> 


0
  • 답변 4

  • 방관
    200
    2021-03-04 10:49:00

    이미지와 컨텐츠의 수가 반드시 동일하다면, 인덱스를 이용하는게 어떨까요?

  • 장독깨기
    1k
    2021-03-04 11:14:31

    var i=0;

    for(;i<img.length;i++) {

      print img[i];

      if(i < content.length) print content[i];

    }

    for(;i<content.length;i++) {

      print content[i];

    }

    이런 식이면 어떨까요?

    스크립트가 뭔지 몰라 슈드코드로 작성합니다.^^


  • 개발자로한걸음
    435
    2021-03-04 11:30:36

     

    방관  


    네 일단은 같아요. 인덱스를  이용하라는건 json  img[1], content[1] 이런식으로 반복하는 함수를 만든뒤에 return에서 함수를 호출하는 방식 말씀하시는건가요?!? 
  • 개발자로한걸음
    435
    2021-03-04 13:50:36

    장독깨기 정말감사합니다 

    생각보다 간단하게 되어서 놀랍네요!! 

    리액트로 작성했구요 이제는 렌더링 하는게 문제인데.. 일단 계속 고민하고있어요 

    그래도 아이디어 주셔서 큰 문제는 해결했네요 감사해욧 

  • 로그인을 하시면 답변을 등록할 수 있습니다.