How to access nested json data in virtual list?

Questions
1

I want to extract data from this nested JSON the text Sunday, Monday, … and display it.
What is the best way to do this?

app.request.json('data.json', function(data) {

    var content = data;

    //console.log(data);

    app.virtualList.create({
      el: '.virtual-list',
      cache: false,
      createUl: false,
      items: content,


      renderItem(item) {
        return `
        <p>${item.text}</p>
        `;
      },
     

    });
  })

[
  {
    "extraction_method": "scrape",
    "top": 142.56038,
    "left": 66.83375,
    "width": 712.9866943359375,
    "height": 255.3146514892578,
    "data": [
      [
        {
          "top": 0,
          "left": 0,
          "width": 0,
          "height": 0,
          "text": "Sunday"
        },
        {
          "top": 142.56038,
          "left": 138.07457,
          "width": 127.11607360839844,
          "height": 22.463668823242188,
          "text": "Monday"
        }  
      ],
      [
        {
          "top": 165.02405,
          "left": 138.07457,
          "width": 127.11607360839844,
          "height": 31.655975341796875,
          "text": "Pizza"
        },
        {
          "top": 165.02405,
          "left": 138.07457,
          "width": 127.11607360839844,
          "height": 31.655975341796875,
          "text": "Soup"
        }
      ]
    ],
    "spec_index": 0
  }
]
2 
// var content = data;
=> var content = data.flatMap(i => i.data.flat());
1 Like
3

Wow Cool, thanks!

Now I just need to manage to retrieve the objects individually to display them in a table.

Something like this:

${item.text[0]} outputs Sunday
${item.text[1]} outputs Monday

4

not clear what you are trying to do

5 
  renderItem(item) {
        return `
        <p>${item.text}</p>
        `;
      },

This returns all data from all keys:

Like this:

Sunday Monday Pizza Soup

But I want to issue each key individually.
This is how I imagine it:

  renderItem(item) {
        return `

<p>This is a dummy text:</p>
 <p>${item.text[0]</p>

<p>Lorem Ipsum dolor:</p>
 <p>${item.text[1]</p>
        `;
      },

should then generate the following output:

This is a dummy text:
Sunday

Lorem Ipsum dolor:
Monday

6 
var content = data;

renderItem: (i) => `
  <p>This is a dummy text:</p>
  <p>${i.data[0][0].text}</p>

  <p>Lorem Ipsum dolor:</p>
  <p>${i.data[0][1].text}</p>

  <p>dummy</p>
  <p>${i.data[1][0].text}</p>
`

or

var content = data.map(i => Object.assign(i,{
  data: i.data.flat()
}));


renderItem: (i) => `
  <p>This is a dummy text:</p>
  <p>${i.data[0].text}</p>

  <p>Lorem Ipsum dolor:</p>
  <p>${i.data[1].text}</p>

  <p>dummy</p>
  <p>${i.data[2].text}‏‏‎‏‏‏‎‏</p>
`
1 Like