Extract specific data from JSON objects

Question

Extract specific data from JSON objects

I have a JSON string that I need to parse on the client side in order to extract data for three different column names (MAT_ETHNICITY, PAT_ETHNICITY, SEX). My goal is to populate drop down lists with the values. Should I handle this by making three separate SQL calls and sending the data via three server calls, parsing it server-side, or parsing it client-side using a loop? Thank you.

[
    {
        "REFCODE": "HIS",
        "DESCRIPTION": "Hispanic or Latino",
        "COLUMN_NAME": "MAT_ETHNICITY"
    },
    {
        "REFCODE": "NHIS",
        "DESCRIPTION": "Not Hispanic or Latino",
        "COLUMN_NAME": "MAT_ETHNICITY"
    },
    {
        "REFCODE": "UNK",
        "DESCRIPTION": "Unknown",
        "COLUMN_NAME": "MAT_ETHNICITY"
    },
    {
        "REFCODE": "AMERIND",
        "DESCRIPTION": "American Indian/Alaska Native",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "ASIAN",
        "DESCRIPTION": "Asian",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "HAW",
        "DESCRIPTION": "Native Hawaiian or Other Pacific Islander",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "AA",
        "DESCRIPTION": "Black or Africian American",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "WHITE",
        "DESCRIPTION": "White",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "MORE",
        "DESCRIPTION": "More than one race",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "UNK",
        "DESCRIPTION": "Unknown",
        "COLUMN_NAME": "PAT_ETHNICITY"
    },
    {
        "REFCODE": "M",
        "DESCRIPTION": "Male",
        "COLUMN_NAME": "SEX"
    },
    {
        "REFCODE": "F",
        "DESCRIPTION": "Female",
        "COLUMN_NAME": "SEX"
    }
]

javascript json

Answer 1

Answer №1

To store the values from a JSON array into separate arrays, you can utilize array mapping:

var refArr = jsonObj.map(function(ele){return ele.REFCODE;})
var descArr = jsonObj.map(function(ele){return ele.DESCRIPTION;})
var colNameArr = jsonObj.map(function(ele){return ele.COLUMN_NAME;})

Each map function will iterate through the JSON array and extract the values to populate their respective arrays.

EDIT: After reviewing your comments, it seems there was confusion regarding the values you wanted. Based on your clarification:

... SEX, PAT_ENTICITY and MAT_ETHNICITY rather than REFCODE, DESCRIPTION and COLUMN_NAME. This means sexArr = ["Female","Male"] and MAT_ETHNICITY would be var matArr=["Hispanic or Latino", "Not Hispanic or Latino"] etc? or is looping a better approach?

You could use .map for those specific value arrays, but remember to handle undefined or empty string values if using mapping since it returns elements equal to the input array length.

A more suitable method may involve iterating with .forEach(...) as shown below:

var sexArr = [];
var patArr = [];
var matArr = [];

jsonObj.forEach(function(ele){
  switch(ele.COLUMN_NAME){
    case "SEX":
      sexArr.push(ele.DESCRIPTION);
      break;
    case "PAT_ETHNICITY":
      patArr.push(ele.DESCRIPTION);
      break;
    case "MAT_ETHNICITY":
      matArr.push(ele.DESCRIPTION);
      break;
    default:
      //handle additional cases if needed
      break;
  }
});

The code snippet above transforms the provided array into the following:

//matArr
["Hispanic or Latino", "Not Hispanic or Latino", "Unknown"]

//patArr
["American Indian/Alaska Native", "Asian", "Native Hawaiian or Other Pacific Islander", "Black or African American", "White", "More than one race", "Unknown"]

//sexArr
["Male", "Female"]

Answer 2

To store the values from a JSON array into separate arrays, you can utilize array mapping:

var refArr = jsonObj.map(function(ele){return ele.REFCODE;})
var descArr = jsonObj.map(function(ele){return ele.DESCRIPTION;})
var colNameArr = jsonObj.map(function(ele){return ele.COLUMN_NAME;})

Each map function will iterate through the JSON array and extract the values to populate their respective arrays.

EDIT: After reviewing your comments, it seems there was confusion regarding the values you wanted. Based on your clarification:

... SEX, PAT_ENTICITY and MAT_ETHNICITY rather than REFCODE, DESCRIPTION and COLUMN_NAME. This means sexArr = ["Female","Male"] and MAT_ETHNICITY would be var matArr=["Hispanic or Latino", "Not Hispanic or Latino"] etc? or is looping a better approach?

You could use .map for those specific value arrays, but remember to handle undefined or empty string values if using mapping since it returns elements equal to the input array length.

A more suitable method may involve iterating with .forEach(...) as shown below:

var sexArr = [];
var patArr = [];
var matArr = [];

jsonObj.forEach(function(ele){
  switch(ele.COLUMN_NAME){
    case "SEX":
      sexArr.push(ele.DESCRIPTION);
      break;
    case "PAT_ETHNICITY":
      patArr.push(ele.DESCRIPTION);
      break;
    case "MAT_ETHNICITY":
      matArr.push(ele.DESCRIPTION);
      break;
    default:
      //handle additional cases if needed
      break;
  }
});

The code snippet above transforms the provided array into the following:

//matArr
["Hispanic or Latino", "Not Hispanic or Latino", "Unknown"]

//patArr
["American Indian/Alaska Native", "Asian", "Native Hawaiian or Other Pacific Islander", "Black or African American", "White", "More than one race", "Unknown"]

//sexArr
["Male", "Female"]

Answer 3

Answer №2

If you want to improve the speed of your website, it's advisable to reduce the number of server calls. In JavaScript, splitting this data into three separate arrays is a simple task.

var data = [...], // Original array
    refCodes = [],
    descriptions = [],
    columns = [],
    parseData;

parseData = function () {
    var ref,
        desc,
        col,
        i,
        l;

    for (i = 0, l = data.length; i < l; i++) {
        ref = data[i]['REFCODE'];
        desc = data[i]['DESCRIPTION'];
        col = data[i]['COLUMN_NAME'];

        if ($.inArray(ref, refCodes) === -1) {
            refCodes.push(ref);
        }
        if ($.inArray(desc, descriptions) === -1) {
            descriptions.push(desc);
        }
        if ($.inArray(col, columns) === -1) {
            columns.push(col);
        }
    }
};

By implementing this code, you will have access to unique values within each array.

Answer 4

If you want to improve the speed of your website, it's advisable to reduce the number of server calls. In JavaScript, splitting this data into three separate arrays is a simple task.

var data = [...], // Original array
    refCodes = [],
    descriptions = [],
    columns = [],
    parseData;

parseData = function () {
    var ref,
        desc,
        col,
        i,
        l;

    for (i = 0, l = data.length; i < l; i++) {
        ref = data[i]['REFCODE'];
        desc = data[i]['DESCRIPTION'];
        col = data[i]['COLUMN_NAME'];

        if ($.inArray(ref, refCodes) === -1) {
            refCodes.push(ref);
        }
        if ($.inArray(desc, descriptions) === -1) {
            descriptions.push(desc);
        }
        if ($.inArray(col, columns) === -1) {
            columns.push(col);
        }
    }
};

By implementing this code, you will have access to unique values within each array.

Answer 5

Answer №3

Here's a helpful technique that can be adjusted to suit your needs

var data = [{"REFCODE":"HIS","DESCRIPTION":"Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"NHIS","DESCRIPTION":"Not Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"AMERIND","DESCRIPTION":"American Indian/Alaska Native","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"ASIAN","DESCRIPTION":"Asian","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"HAW","DESCRIPTION":"Native Hawaiian or Other Pacific Islander","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"AA","DESCRIPTION":"Black or Africian American","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"WHITE","DESCRIPTION":"White","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"MORE","DESCRIPTION":"More than one race","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"M","DESCRIPTION":"Male","COLUMN_NAME":"SEX"},{"REFCODE":"F","DESCRIPTION":"Female","COLUMN_NAME":"SEX"}];

function shallowClone(obj, exclude) {
  var clone = {};
  for (var prop in obj) {
    if (prop != exclude) {
      clone[prop] = obj[prop];
    }
  }
  return clone;
}

function mapFromArray (list , keyByProp, excludeKeyByProp) {
  var map = {};
  for (var i=0, item; item = list[i]; i++) {
    if ( !map[item[keyByProp]] ) {
      map[item[keyByProp]] = [];
    }
    map[item[keyByProp]].push(item);
  }
  
  if (excludeKeyByProp) {
    for (var prop in map) {
      map[prop] = map[prop].map(function(obj){
        return shallowClone(obj, keyByProp);
      });
    }
  }
  return map;
};


var separated = mapFromArray(data, 'COLUMN_NAME', true);
console.log(separated);
var pre = document.body.appendChild(document.createElement('pre'));
pre.innerHTML = JSON.stringify(separated, null, 2);

Prior to stating your specific output requirement in a comment, I provided this solution

This answer by krillgar is effective. It avoids being O(n2) and ensures no duplicates.

var data = [/*your data */];
var refCodes = {}, descriptions = {}, columns = {};
for (var i = 0; i < data.length; i++) {
    refCodes[data[i].REFCODE] = true;
    descriptions[data[i].DESCRIPTION] = true;
    columns[data[i].COLUMN_NAME] = true;
}

refCodes = Object.keys(refCodes);
descriptions = Object.keys(descriptions);
columns = Object.keys(columns);

Additionally, here is a more general version of the above code

var data = [{"REFCODE":"HIS","DESCRIPTION":"Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"NHIS","DESCRIPTION":"Not Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"AMERIND","DESCRIPTION":"American Indian/Alaska Native","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"ASIAN","DESCRIPTION":"Asian","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"HAW","DESCRIPTION":"Native Hawaiian or Other Pacific Islander","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"AA","DESCRIPTION":"Black or Africian American","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"WHITE","DESCRIPTION":"White","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"MORE","DESCRIPTION":"More than one race","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"M","DESCRIPTION":"Male","COLUMN_NAME":"SEX"},{"REFCODE":"F","DESCRIPTION":"Female","COLUMN_NAME":"SEX"}];

function makeArraysFromProps(data) {
  var map = {};
  for (var i = 0; i < data.length; i++) {
    var keys = Object.keys( data[i] );
    for (var j = 0; j < keys.length; j++ ) {
      var key = keys[j];
      if (!map[key]) {
        // First mapping to prevent duplicates without an O(n2) complexity
        map[key] = {};
      }
      map[key][ data[i][key] ] = true;
    }
  }
  var mapKeys = Object.keys(map);
  for (var k=0; k < mapKeys.length; k++) {
    map[mapKeys[k]] = Object.keys(map[mapKeys[k]]);
  }
  return map;
}


var separated = makeArraysFromProps(data);
console.log(separated);
var pre = document.body.appendChild(document.createElement('pre'));
pre.innerHTML = JSON.stringify(separated, null, 2);
var separated = makeArraysFromProps(data);
console.log(separated);

document.body.appendChild(document.createTextNode(JSON.stringify(separated)))

Answer 6

Here's a helpful technique that can be adjusted to suit your needs

var data = [{"REFCODE":"HIS","DESCRIPTION":"Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"NHIS","DESCRIPTION":"Not Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"AMERIND","DESCRIPTION":"American Indian/Alaska Native","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"ASIAN","DESCRIPTION":"Asian","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"HAW","DESCRIPTION":"Native Hawaiian or Other Pacific Islander","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"AA","DESCRIPTION":"Black or Africian American","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"WHITE","DESCRIPTION":"White","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"MORE","DESCRIPTION":"More than one race","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"M","DESCRIPTION":"Male","COLUMN_NAME":"SEX"},{"REFCODE":"F","DESCRIPTION":"Female","COLUMN_NAME":"SEX"}];

function shallowClone(obj, exclude) {
  var clone = {};
  for (var prop in obj) {
    if (prop != exclude) {
      clone[prop] = obj[prop];
    }
  }
  return clone;
}

function mapFromArray (list , keyByProp, excludeKeyByProp) {
  var map = {};
  for (var i=0, item; item = list[i]; i++) {
    if ( !map[item[keyByProp]] ) {
      map[item[keyByProp]] = [];
    }
    map[item[keyByProp]].push(item);
  }
  
  if (excludeKeyByProp) {
    for (var prop in map) {
      map[prop] = map[prop].map(function(obj){
        return shallowClone(obj, keyByProp);
      });
    }
  }
  return map;
};


var separated = mapFromArray(data, 'COLUMN_NAME', true);
console.log(separated);
var pre = document.body.appendChild(document.createElement('pre'));
pre.innerHTML = JSON.stringify(separated, null, 2);

Prior to stating your specific output requirement in a comment, I provided this solution

This answer by krillgar is effective. It avoids being O(n2) and ensures no duplicates.

var data = [/*your data */];
var refCodes = {}, descriptions = {}, columns = {};
for (var i = 0; i < data.length; i++) {
    refCodes[data[i].REFCODE] = true;
    descriptions[data[i].DESCRIPTION] = true;
    columns[data[i].COLUMN_NAME] = true;
}

refCodes = Object.keys(refCodes);
descriptions = Object.keys(descriptions);
columns = Object.keys(columns);

Additionally, here is a more general version of the above code

var data = [{"REFCODE":"HIS","DESCRIPTION":"Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"NHIS","DESCRIPTION":"Not Hispanic or Latino","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"MAT_ETHNICITY"},{"REFCODE":"AMERIND","DESCRIPTION":"American Indian/Alaska Native","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"ASIAN","DESCRIPTION":"Asian","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"HAW","DESCRIPTION":"Native Hawaiian or Other Pacific Islander","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"AA","DESCRIPTION":"Black or Africian American","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"WHITE","DESCRIPTION":"White","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"MORE","DESCRIPTION":"More than one race","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"UNK","DESCRIPTION":"Unknown","COLUMN_NAME":"PAT_ETHNICITY"},{"REFCODE":"M","DESCRIPTION":"Male","COLUMN_NAME":"SEX"},{"REFCODE":"F","DESCRIPTION":"Female","COLUMN_NAME":"SEX"}];

function makeArraysFromProps(data) {
  var map = {};
  for (var i = 0; i < data.length; i++) {
    var keys = Object.keys( data[i] );
    for (var j = 0; j < keys.length; j++ ) {
      var key = keys[j];
      if (!map[key]) {
        // First mapping to prevent duplicates without an O(n2) complexity
        map[key] = {};
      }
      map[key][ data[i][key] ] = true;
    }
  }
  var mapKeys = Object.keys(map);
  for (var k=0; k < mapKeys.length; k++) {
    map[mapKeys[k]] = Object.keys(map[mapKeys[k]]);
  }
  return map;
}


var separated = makeArraysFromProps(data);
console.log(separated);
var pre = document.body.appendChild(document.createElement('pre'));
pre.innerHTML = JSON.stringify(separated, null, 2);
var separated = makeArraysFromProps(data);
console.log(separated);

document.body.appendChild(document.createTextNode(JSON.stringify(separated)))

Answer 7

Answer №4

Why waste time with multiple SQL calls when you can achieve what you need with just one call? Simply parse the data client-side and populate your dropdown using JavaScript.

As for extracting the data, you can create an object to store the values you want and loop through it as needed. Here is a simple way to do that:

var json = YOURJSONOBJECT;

var patObj = new Object;

json.forEach(function(data, i){ 
  if(data.COLUMN_NAME == 'PAT_ETHNICITY') {
    patObj[i] = { refCode: data.REFCODE, description: data.DESCRIPTION }
  }
  // Add other columns here
});

Answer 8

Why waste time with multiple SQL calls when you can achieve what you need with just one call? Simply parse the data client-side and populate your dropdown using JavaScript.

As for extracting the data, you can create an object to store the values you want and loop through it as needed. Here is a simple way to do that:

var json = YOURJSONOBJECT;

var patObj = new Object;

json.forEach(function(data, i){ 
  if(data.COLUMN_NAME == 'PAT_ETHNICITY') {
    patObj[i] = { refCode: data.REFCODE, description: data.DESCRIPTION }
  }
  // Add other columns here
});

Extract specific data from JSON objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Update your Electron application with the npm update command

Step-by-step guide to uploading files using cucumber-js

Why isn't my lightbox able to read this specific property?

The properties are not appearing on the screen nor in the React Development Tools

PHP makes it simple to decode JSON into an associative array, complete with numbering for

Enhance the efficiency of your JavaScript code by minimizing repeated selectors

Javascript - Transforming tabular information into a hierarchical tree structure (JSON)

Trigger an action in the clean-up function of useEffect

Utilizing amCharts Postprocessing for fetching data for visual representation

React - Implementing dynamic component rendering on a webpage

The dynamic alteration of BackgroundImage does not appear to be functioning correctly with tailwind and nextjs

Display JSON element in Angular only once

How to pass an axios-retrieved array prop to a child component in a Laravel Vue SPA?

Unable to modify array state with data from another state

What is preventing me from applying a jQuery function to an ng-click event in AngularJS?

Tips for sending icons as properties in React using TypeScript

Activate the class only on the current element

`Next.js project experiencing issues with scroll trigger functionality`

Trouble getting search filter to function properly on an array of objects in a Vue JavaScript application

Achieve Vue to refresh the view or component