Extract information stored in a JSON object and input it into an array

Question

Extract information stored in a JSON object and input it into an array

I'm struggling to extract data from a multidimensional array.

In my .php file, I retrieve data from a database and encode it to JSON.

JSON= {"1":{"SME":"0","SAUDE":"0"}....

Desired data structure:

     array{
        0 => Array{"SME" => 1,
                   "SAUDE" =>4}
        1 => Array{"SME" => 10,
                   "SAUDE" => 0}
      }

In my .HTML:

$.getJSON('getOrgaoAno.php', function(data) {    
$.each(data, function(key, val) {
      alert(key); // Displaying the index of the first array
      alert(val); // Displaying [OBJECT] in the alert box
    }
});

How can I access the data from the second array and store it in an array in my .HTML for use in Chart.js?

UPDATE 1

Here's the data I'm receiving from the .php encoded to JSON (using console.log now, which is much easier):

The "1,2,3....9" represents the keys of the first array containing objects:

1    
Object { SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO : "0", SECRETARIA MUNICIPAL DE SAUDE: "0", SETOR DE RH: "0", SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER : "0", SETOR DE CADASTRO DE IMOVEIS: "0", SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE: "0", SETOR AGILIZA: "0" }testedados.html:21:5
2
Object { SECRETARIA MUNICIPAL DESENVOLVIMENTO URBANO : "1", SECRETARIA MUNICIPAL DE SAUDE: "0", SETOR DE RH: "0", SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER : "0", SETOR DE CADASTRO DE IMOVEIS: "0", SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE: "0", SETOR AGILIZA: "0" }testedados.html:21:5
3
Object { SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO : "0", SECRETARIA MUNICIPAL DE SAUDE: "1", SETOR DE RH: "1", SECRETARIA MUNICIPAL DE CULTURA, TURISMO, ESPORTE E LAZER : "0", SETOR DE CADASTRO DE IMOVEIS: "0", SECRETARIA MUNICIPAL DE DESENVOLVIMENTO ECONÔMICO, TRABALHO E MEIO AMBIENTE: "0", SETOR AGILIZA: "0" }testedados.html:21:5
4
Object { SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO : "0", SECRETARIA MUNICIPAL...

I want to extract the "keys" and "values" from the object and store them in an array.

For example:

var Desc = "Key"

var Valor = "Value"

Or should I consider changing the way I retrieve data from .php?

UPDATE 2

To select values in an array, you can use:

Two "Jquery.each" loops:

    var index = 0;
var index2 = 0;
jQuery.each( data, function( key, value ) {
      index++;
      index2 = 0;
      jQuery.each( value, function( key, value ) {
        if (index2 == 0)
         {
          arrDesc[index] = key;
          arrDesc[index] += ",";
          arrQtd[index] = value;
          index2 ++;
         }
         else
         {
          arrDesc[index] += key;
          arrDesc[index] += ",";
          arrQtd[index] += value;
         }

      });
    });

javascript json chart.js

Answer 1

Answer №1

For effective debugging of your code, consider using console.log() over alerts. By doing so, you can easily review the output in the browser's console window (F12 to open). To add the inner object to an array, simply utilize Array.prototype.push().

var j = {"1":{"SME":"0","SAUDE":"0"}};
var arr = [];

$.each(j, function(key, val) {
    console.log(key); // 1
    console.log(val); // Object {SME: "0", SAUDE: "0"}
    console.log(val.SAUDE); // 0
    console.log(val.SME); // 0

    // adding the object to the array:
    arr.push(val);     

});

Answer 2

For effective debugging of your code, consider using console.log() over alerts. By doing so, you can easily review the output in the browser's console window (F12 to open). To add the inner object to an array, simply utilize Array.prototype.push().

var j = {"1":{"SME":"0","SAUDE":"0"}};
var arr = [];

$.each(j, function(key, val) {
    console.log(key); // 1
    console.log(val); // Object {SME: "0", SAUDE: "0"}
    console.log(val.SAUDE); // 0
    console.log(val.SME); // 0

    // adding the object to the array:
    arr.push(val);     

});

Answer 3

Answer №2

Make sure your PHP script named "getOrgaoAno.php" appears exactly like this:

<?php
 $data = array(/*YOUR DATA GOES HERE*/);
 echo json_encode($data);
?>

Ensure there are no additional spaces or characters before "<?php" or after "?>", as this may cause a JSON format error in JavaScript

Your JavaScript code is correct, simply log the output to the browser console.

<script type="text/javascript">
 $.getJSON('getOrgaoAno.php', function(data) {
  $.each(data, function(key, val) {
   console.log(key); //Display the index of the first array
   console.log(val); //Show [OBJECT] in the console
  })
 });
</script>

Answer 4

Make sure your PHP script named "getOrgaoAno.php" appears exactly like this:

<?php
 $data = array(/*YOUR DATA GOES HERE*/);
 echo json_encode($data);
?>

Ensure there are no additional spaces or characters before "<?php" or after "?>", as this may cause a JSON format error in JavaScript

Your JavaScript code is correct, simply log the output to the browser console.

<script type="text/javascript">
 $.getJSON('getOrgaoAno.php', function(data) {
  $.each(data, function(key, val) {
   console.log(key); //Display the index of the first array
   console.log(val); //Show [OBJECT] in the console
  })
 });
</script>

Extract information stored in a JSON object and input it into an array

Answer №1

Answer №2

Similar questions

Attempting the transformation of jQuery ajax requests to Angular's http service

Unable to isolate segments of a string

Styling Input elements with a unified border in Bootstrap

Struggling to retrieve the fake JavaScript data for my Vue.js table

Extract data from a JSON-encoded array using JavaScript

Tackling the challenge of merging PDF files and designing a Table of Contents feature reminiscent of Acrobat in Node.js and JavaScript

Unleashing the power of TypeScript with Solid JS Abstract Class

Update all values in JSON data without the need to iterate through each one

Creating a Button with Icon and Text in TypeScript: A step-by-step guide

What is the process of retrieving the JSON array containing data from Reddit?

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Strange issue: the code appears to be running multiple times with just one click

Creating functionality with a native JavaScript plugin within a directive and test suite

Switch back and forth between two different function loops by clicking

Fetching a value by key from a JSON object in a Node.js script

Create a pandas dataframe by processing JSON data retrieved from a web API

React SVG not displaying on page

The Context API leaves me feeling lost and confused

a tutorial on linking component data to a prop value