Looping over Object to get value of key and generate 'x' amount of elements

Question

I will try to explain myself better. I have a javascript object. for example:

const obj = {
 a: 1,
 b: 2,
 c: 3
};

What i need to return is let's say a <p> that will look like this:

<p>a 1</p>
<p>b 1</p>
<p>b 2</p>
<p>c 1</p>
<p>c 2</p>
<p>c 3</p>

I am trying to catch how many times a value is there inside a key. and based on that generate the result i displayed above.

I'm trying to do something like:

for (var k in obj) {
    if (obj.hasOwnProperty(k)) {
      return <p>{`key ${k} value ${obj[k]}`}</p>;
    }
  }
}

This return only 1 paragraph.. how can i initiate over those key values and generate those paragraphs like i displayed in the example? Thanks!

EDIT:

If it's easier, how can i convert obj into

newObj = [
 {
  name: a,
  number: 1
 },
 {
  name: b,
  number: 1
 },
 {
  name: b,
  number: 2
 },
 {
  name: c,
  number: 1
 },
 {
  name: c,
  number: 2
 },
 {
  name: c,
  number: 3
 }
];

I can then achieve the result i want with simple Map.

Answer 1

Quite easy with a small helper function times():

const times = (n, fn) => [...Array(n)].map((_, i) => fn(i));

const obj = {
 a: 1,
 b: 2,
 c: 3
};

let result = [];

Object.keys(obj).forEach(k => 
  times(obj[k], i => 
    result.push('<p>' + k + (i + 1) + '</p>')));

console.log(result);