How can I use two strings to create new object?

Question

I want to get two elements from a page and put them into one object

const entryElements = await page.$$('div.kpi-entry');
const contents = await Promise.all(
entryElements.map(async (element) => {
  const kpiValue = await (await element.$('span.text-xl'))?.innerText();
  const kpiName = await (await element.$('eui-base-v0-tooltip'))?.innerText();
  const kpiObject = {kpiValue,kpiName,};
  return kpiObject;
})

kpiObject returns

  { kpiValue: '1', kpiName: 'Critical' },
  { kpiValue: '2', kpiName: 'Major' },
  { kpiValue: '3', kpiName: 'Minor' },
  { kpiValue: '4', kpiName: 'Warning' },
  { kpiValue: '5', kpiName: 'Indeterminate' }

but I expected

{
  Critical: '1',
  Major: '2',
  Minor: '3',
  Warning: '4',
  Indeterminate: '5',
}

What is the best way to do this given this HTML?

<div class="kpi">
  <div>
    <!---->
    <!---->
  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">
      <span class="text-xl"><!---->3<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Critical" position="bottom" delay="500">
        Critical
      </eui-base-v0-tooltip>
    </div>
  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">
      <span class="text-xl"><!---->36<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Major" position="bottom" delay="500">
        Major
      </eui-base-v0-tooltip>
    </div>
  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">
      <span class="text-xl"><!---->5<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Minor" position="bottom" delay="500">
        Minor
      </eui-base-v0-tooltip>
    </div>
  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->7<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Warning" position="bottom" delay="500">
        Warning
      </eui-base-v0-tooltip>
    </div>
  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->0<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Indeterminate" position="bottom" delay="500">
        Indeterminate
      </eui-base-v0-tooltip>
    </div>
  </div>
  <!---->
</div>

`{kpiValue,kpiName,}` is the reason you get the output you see. Use a dynamic key to get the output you want? — evolutionxbox, Mar 16 '22 at 08:38
Does this answer your question? [Add a property to a JavaScript object using a variable as the name?](https://stackoverflow.com/questions/695050/add-a-property-to-a-javascript-object-using-a-variable-as-the-name) — evolutionxbox, Mar 16 '22 at 08:38
If you post your HTML and what framework you use, it may well be unnecessary to have all these await await — mplungjan, Mar 16 '22 at 09:14
you are right, we use our company own framework, but thank you for your tips , its very useful — ray, Mar 16 '22 at 09:21

mplungjan · Answer 1 · 2022-03-17T09:29:11.927

This should work too. No need for promises and awaits here

const contents = [...document.querySelectorAll('div.kpi-entry')].map(element => {
    const kpiValue = element.querySelector('span.text-xl')?.textContent.trim() ?? null;
    const kpiName = element.querySelector('eui-base-v0-tooltip')?.textContent.trim() ?? null;
    return kpiName ? { [kpiName]: kpiValue } : null;
  })
  .filter(item => item); // only needed if the map returns any nulls

console.log(contents)

<div class="kpi">
  <div>
    <!---->
    <!---->
  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->3<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Critical" position="bottom" delay="500">
        Critical
      </eui-base-v0-tooltip>
    </div>

  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->36<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Major" position="bottom" delay="500">
        Major
      </eui-base-v0-tooltip>
    </div>

  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->5<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Minor" position="bottom" delay="500">
        Minor
      </eui-base-v0-tooltip>
    </div>

  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->7<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Warning" position="bottom" delay="500">
        Warning
      </eui-base-v0-tooltip>
    </div>

  </div>
  <!---->
  <div class="kpi-entry">
    <div class="kpi-item kpi-value ">

      <span class="text-xl"><!---->0<!----></span>
      <span class="text-lg text-color-gray"><!----> <!----></span>
      <eui-base-v0-tooltip class="kpi-label text-color-gray" message="Indeterminate" position="bottom" delay="500">
        Indeterminate
      </eui-base-v0-tooltip>
    </div>

  </div>
  <!---->
</div>

thanks, but the promise needed I think ,because there is 6 element same with "div.kpi-entry" I use $$ to get all element content, — ray, Mar 16 '22 at 09:34
Sure, I have updated the HTML as picture, its structure little bit different with your guess . — ray, Mar 17 '22 at 05:37
$$ is the prototype selector that returns an array of elements by CSS selector — ray, Mar 17 '22 at 05:39
yes sir, I have updated my HTML as code in answer area, and one more thing I have updated my expecting I want your one more tips :D — ray, Mar 17 '22 at 08:57
But it works here. I cannot help you run my script on your page — mplungjan, Mar 17 '22 at 09:26
Sure, thanks for your answer, you are great man, kind uncle hhh — ray, Mar 17 '22 at 09:31

score -1 · Answer 2 · answered Mar 16 '22 at 08:45

-1

Try this, I just modified your code a bit

const entryElements = await page.$$('div.kpi-entry');
const kpiObject = {}; // create empty object
const contents = await Promise.all(
entryElements.map(async (element) => {
  const kpiValue = await (await element.$('span.text-xl'))?.innerText();
  const kpiName = await (await element.$('eui-base-v0-tooltip'))?.innerText();
  return kpiObject[kpiName] = kpiValue; // add value directly to object
})

answered Mar 16 '22 at 08:45

semperlabs

458
4
7

its return array [ '1', '2', '3', '4', '5' ] – ray Mar 16 '22 at 08:51
Is this kpiObject? Check this example how to assign values using brackets notation https://jsfiddle.net/3mzyaqeL/ – semperlabs Mar 16 '22 at 09:03
not me, your tips very useful, and I used " const kpiObject = [kpiName]: kpiValue; " this way to got I expected, thank you – ray Mar 17 '22 at 05:32

score -1 · Answer 3 · answered Mar 16 '22 at 09:15

You can use Array.map to transform your array of objects

// Your array
const array = [
  { kpiValue: '1', kpiName: 'Critical' },
  { kpiValue: '2', kpiName: 'Major' },
  { kpiValue: '3', kpiName: 'Minor' },
  { kpiValue: '4', kpiName: 'Warning' },
  { kpiValue: '5', kpiName: 'Indeterminate' }
];

// Transformation
const newArray = array.map(obj => ({ [obj.kpiName]: obj.kpiValue }));

// Test
console.log(newArray);

How can I use two strings to create new object?

3 Answers3