extact data from nested json and add it to single array

Question

I wanted to extract a few data from the below json add them to a single array..

I was able to extract all the text values inside the bloc, but not able to push it to the single array.... below is the code I use to extract it

json.Blocks.map(item=>{
  console.log(item.Text)
})

But dont know how to push I to a single array...like this

[
 "type": "MyKad",
 "id":"610522-10-5378",
 "name":"CHAN MEI MEI",
 "add":"NO 18 JALAN SUNGAI MASAI"
]

   {
  "DocumentMetadata": {
    "Pages": 1
  },
  "Blocks": [
    {
      "Boundary": "0.002"
    },
    {
      "Text": "MyKad"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.50830841064453,
      "Text": "610522-10-5378"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.68528747558594,
      "Text": "CHAN MEI MEI"
    },
    {
      "Text": "NO 18 JALAN SUNGAI MASAI"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.84520721435547,
      "Text": "SUBANG ALAM"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.87599182128906,
      "Text": "40400 SHAH ALAM"
    }
  ],
  "AnalyzeDocumentModelVersion": "1.0"
}

Answer 1

You're close you just need to create a .map array of objects using whatever properties you want with whatever values you want.

const singleArray = json.Blocks.map(item=>{
  return { type: item.Text };
});

Working snippet based on the information you've provided:

const { StrictMode, useState } = React;
const { createRoot } = ReactDOM;

const someJSON = {
  "DocumentMetadata": {
    "Pages": 1
  },
  "Blocks": [
    {
      "Text": "MyKad"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.50830841064453,
      "Text": "610522-10-5378"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.68528747558594,
      "Text": "CHAN MEI MEI"
    },
    {
      "Text": "NO 18 JALAN SUNGAI MASAI"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.84520721435547,
      "Text": "SUBANG ALAM"
    },
    {
      "BlockType": "LINE",
      "Confidence": 99.87599182128906,
      "Text": "40400 SHAH ALAM"
    }
  ],
  "AnalyzeDocumentModelVersion": "1.0"
};

const App = () => {
  const singleArray = someJSON.Blocks.map(item=>{
    return { type: item.Text };
  });
  console.log('singleArray', singleArray);
  return (<div></div>);
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>

What is type, id, name, add? That's up to you to decide, however, this is how you create a map array of some JSON array.