Attempting to extract data from a JSON object within a multidimensional array

Question

Attempting to extract data from a JSON object within a multidimensional array

Looking at the JSON structure that I need to work with:

[
    {
        "result":"OK",
        "message":"Display",
        "value":200,
        "rows":29
    } , 
    [
        {
            "personID":1,
            "img_path":"/1234/",
            "img":"00001.jpg"
        },
        {
            "personID":2,
            "img_path":"/1234/",
            "img":"00002.jpg"
        },
    ]
]

My goal is to extract ONLY this part:

 personID: 1
 img_path: /1234/
 img: 00001.jpg

Currently, my code retrieves the entire JSON output. Here's a snippet of what I have been doing, which fetches and displays the full JSON response:

var fullURL = the_URL_where_Im_getting_the_json

function readTextFile(file, callback) 
{
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") 
        {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

readTextFile(fullURL, function(text){

    var data = JSON.parse(text);
    console.log(data); 
    }
);

Your assistance in helping me retrieve only the specific portion of the JSON data is greatly appreciated. Thank you.

javascript arrays json object

Answer 1

Answer №1

Attempting to retrieve this information using indexes may not be the most reliable method. If you are certain that the structure will remain consistent with this particular type of output, you could destructure the data into info and results and then iterate through them. For instance, if you already know the specific identifier you are searching for, utilizing find can be helpful.

I have expanded on this example to illustrate how functions like map and find can handle larger datasets, especially as your project grows in complexity. Front-end frameworks such as React often automate these processes for you.

const data = [{
    "result": "OK",
    "message": "Display",
    "value": 200,
    "rows": 29
  },
  [{
      "personID": 1,
      "img_path": "/1234/",
      "img": "00001.jpg"
    },
    {
      "personID": 2,
      "img_path": "/1234/",
      "img": "00002.jpg"
    },
  ]
]

const [info, results] = data;
document.getElementById('information').innerHTML = Object.entries(info).map(([key, value]) => `
<div>
  <span class="key">${key.toUpperCase()}:</span>
  <span class="value">${value}</span>
</div>`).join('');

document.getElementById('results').innerHTML = results.map(result => {
  return `<div>ID: ${result.personID}, path: ${result.img_path}</div>`
}).join('');

document.getElementById('find').addEventListener('keyup', function() {
  document.getElementById('target').innerHTML = (results.find(result => result.personID == this.value) || {
    img: 'Not Found'
  }).img
})

.cards {
  display: flex;
}

.card {
  box-shadow: 1px 1px 10px;
  padding: 16px;
  width: 25%;
  margin: 6px;
}

.card-title {
  font-size: 2em;
  border-bottom: 1px solid black;
  padding: 6px 6px 6px 0px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: space-between;
}

.card-content>div {
  margin: 6px;
  display: flex;
  justify-content: space-between;
}

input {
  width: 50px;
}

<div class="cards">
  <div class="card">
    <div class="card-title">
      Information
    </div>
    <div id="information" class="card-content"></div>
  </div>
  <div class="card">
    <div class="card-title">
      All People
    </div>
    <div id="results" class="card-content"></div>
  </div>
  <div class="card">
    <div class="card-title">
      Find IMG
    </div>
    Person ID: 
    <input id="find" />
    <div id="target" class="card-content" />
  </div>
</div>

Answer 2

Attempting to retrieve this information using indexes may not be the most reliable method. If you are certain that the structure will remain consistent with this particular type of output, you could destructure the data into info and results and then iterate through them. For instance, if you already know the specific identifier you are searching for, utilizing find can be helpful.

I have expanded on this example to illustrate how functions like map and find can handle larger datasets, especially as your project grows in complexity. Front-end frameworks such as React often automate these processes for you.

const data = [{
    "result": "OK",
    "message": "Display",
    "value": 200,
    "rows": 29
  },
  [{
      "personID": 1,
      "img_path": "/1234/",
      "img": "00001.jpg"
    },
    {
      "personID": 2,
      "img_path": "/1234/",
      "img": "00002.jpg"
    },
  ]
]

const [info, results] = data;
document.getElementById('information').innerHTML = Object.entries(info).map(([key, value]) => `
<div>
  <span class="key">${key.toUpperCase()}:</span>
  <span class="value">${value}</span>
</div>`).join('');

document.getElementById('results').innerHTML = results.map(result => {
  return `<div>ID: ${result.personID}, path: ${result.img_path}</div>`
}).join('');

document.getElementById('find').addEventListener('keyup', function() {
  document.getElementById('target').innerHTML = (results.find(result => result.personID == this.value) || {
    img: 'Not Found'
  }).img
})

.cards {
  display: flex;
}

.card {
  box-shadow: 1px 1px 10px;
  padding: 16px;
  width: 25%;
  margin: 6px;
}

.card-title {
  font-size: 2em;
  border-bottom: 1px solid black;
  padding: 6px 6px 6px 0px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: space-between;
}

.card-content>div {
  margin: 6px;
  display: flex;
  justify-content: space-between;
}

input {
  width: 50px;
}

<div class="cards">
  <div class="card">
    <div class="card-title">
      Information
    </div>
    <div id="information" class="card-content"></div>
  </div>
  <div class="card">
    <div class="card-title">
      All People
    </div>
    <div id="results" class="card-content"></div>
  </div>
  <div class="card">
    <div class="card-title">
      Find IMG
    </div>
    Person ID: 
    <input id="find" />
    <div id="target" class="card-content" />
  </div>
</div>

Answer 3

Answer №2

The information provided in your document seems to require some consistency adjustments.

One way to achieve this is by following these steps:

// To access data of all objects within the 2nd item (data[1][0...n])
var objectData = data[1][0] 
var personID = objectData.personID
var img = objectData.img
var img_path = objectData.img_path

Answer 4

The information provided in your document seems to require some consistency adjustments.

One way to achieve this is by following these steps:

// To access data of all objects within the 2nd item (data[1][0...n])
var objectData = data[1][0] 
var personID = objectData.personID
var img = objectData.img
var img_path = objectData.img_path

Attempting to extract data from a JSON object within a multidimensional array

Answer №1

Answer №2

Similar questions

Start numerous nodejs servers with just a single command

W/System.err: The data in the form of an empty array cannot be converted into a JSONObject due to a org.json.JSONException

Use a JavaScript function on identical IDs

Is there a way to incorporate arguments into my discord.js commands?

Whenever a query is entered, each letter creates a new individual page. What measures can be taken to avoid this?

Leverage the Power of Multiple Markers on Google Maps with API Integration

The deletion was not successfully carried out in the ajax request

Encountering a Node Js post handling error with the message "Cannot GET /url

Is there a way to add zeros at the beginning of ZIP codes that have only 3 or 4 digits using LODASH or Typescript?

Integrating Material-UI Dialog with Material-table in ReactJS: A Step-by-Step Guide

Shorten a string once a particular word is found in either Smarty or JavaScript/jQuery

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

Design a model class containing two arrow functions stored in variables with a default value

AJAX and Python conflict - The requested resource is missing the 'Access-Control-Allow-Origin' header

Leveraging AJAX and PHP for generating PDF files

It is essential for each child in a list to be assigned a unique "key" prop to ensure proper rendering, even after the key has been assigned (in Next

What is the best way to retrieve the UTC value of a specific date and time within a particular time zone using JavaScript?

Purge precise LocalStorage data in HTML/JavaScript

Utilizing Selenium Webdriver to efficiently scroll through a webpage with AJAX-loaded content

Request for removal in Express.js