Array of object value printing in javascript

Question

I want to print expected output values in two loop using map, Can you please help me.

var data=[{'2021':['Q2 2021','Q3 2021','Q4 2021']},
     {'2022':['Q1 2022','Q2 2022']}
    ]
   
   data.map((obj,ind)=>{
    console.log(Object.keys(obj));
    Object.keys(obj).map((yearQuarter, i) => {
                  console.log(obj[yearQuarter]);
                  })
   })
   //getting output
   //['2022']
   //['Q1 2022', 'Q2 2022']
   //Expected Output
   //'2022'
   //'Q1 2022`
   //'Q2 2022`

flyingfox · Answer 1 · 2022-10-21T10:02:46.973

1

We can use replace to make obj[yearQuarter] print by multiple lines

var data=[{'2021':['Q2 2021','Q3 2021','Q4 2021']},
     {'2022':['Q1 2022','Q2 2022']}
    ]

data.map((obj,ind)=>{
  console.log(Object.keys(obj)[0]);
  Object.keys(obj).forEach((yearQuarter, i) => {
      console.log(obj[yearQuarter].toString().replace('[]','').replaceAll(',','\n'))
   })
})

edited Oct 21 '22 at 10:02

answered Oct 21 '22 at 09:36

flyingfox

13,414
3
24
39

don't use `map()` as `forEach()`. [JavaScript: Difference between .forEach() and .map()](https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map) – pilchard Oct 21 '22 at 09:45
This is not working in react – Supriya Kumari Oct 21 '22 at 11:16
@SupriyaKumari What's the prolem,it has nothing to do with react,you might need to change `\n` to `
` – flyingfox Oct 21 '22 at 11:17
Still not working, is there any other way? – Supriya Kumari Oct 21 '22 at 11:25
@SupriyaKumari need to know more details about your code,maybe we need a chat – flyingfox Oct 21 '22 at 11:26
I want to create menu and submenu using two map loop in react js, and with ablove given code, subarray values coming in single line – Supriya Kumari Oct 21 '22 at 11:27
@SupriyaKumari,you need to add you code,also as I said,you need to use `
` instead of `\n` – flyingfox Oct 21 '22 at 11:28
not working – Supriya Kumari Oct 21 '22 at 11:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/248962/discussion-between-lucumt-and-supriya-kumari). – flyingfox Oct 21 '22 at 11:32

score 0 · Answer 2 · answered Oct 21 '22 at 12:34

As per my understanding, You want to print both key as well as the values (In a string format). If Yes, You are iterating the input object in a right way. Just to print the values, you can use template literals.

Live Demo :

var data = [
  {'2021':['Q2 2021','Q3 2021','Q4 2021']},
  {'2022':['Q1 2022','Q2 2022']}
];

data.map((obj,ind)=>{
  Object.keys(obj).map((yearQuarter, i) => {
    console.log(`${yearQuarter} : ${obj[yearQuarter].join(', ')}`);
  })
})

score 0 · Answer 3 · answered Oct 21 '22 at 13:13

Another approach is to make a complete line with newline characters and print it all at once

const data = [{'2021':['Q2 2021','Q3 2021','Q4 2021']},{'2022':['Q1 2022','Q2 2022']}];

const renderYear = (obj) => Object.entries(obj)
  .map(([year, quarters]) => `${year}\n${quarters.join("\n")}`);
  
const renderYears = (arr) => arr.flatMap(renderYear).join("\n")

console.log(renderYears(data));

.as-console-wrapper { max-height: 100% !important; top: 0 }

Array of object value printing in javascript

3 Answers3