Obtain JSON value based on changing state in React Native

Question

Obtain JSON value based on changing state in React Native

After receiving a JSON from an API, I store it in this.state.data as shown below:

[
  {
    "name": "Primary Category",
    "value": [
      {
        "value": "Fracture",
        "Diagnosis_Code": ["DIAG003"],
        "name": "Primary Category",
        "FK_Diagnosis_Content_ID": 3,
        "FK_Diagnosis_Category_ID": 1
      },
      {
        "value": "Osteoarthritis",
        "Diagnosis_Code": ["DIAG001"],
        "name": "Primary Category",
        "FK_Diagnosis_Content_ID": 1,
        "FK_Diagnosis_Category_ID": 1
      },
      {
        "value": "Osteonecrosis",
        "Diagnosis_Code": ["DIAG002", "DIAG004"],
        "name": "Primary Category",
        "FK_Diagnosis_Content_ID": 2,
        "FK_Diagnosis_Category_ID": 1
      }
    ]
  },
  {
    "name": "Anatomy",
    "value": [
      {
        "value": "Hip",
        "Diagnosis_Code": ["DIAG001"],
        "name": "Anatomy",
        "FK_Diagnosis_Content_ID": 4,
        "FK_Diagnosis_Category_ID": 2
      },
      {
        "value": "Pelvis",
        "Diagnosis_Code": ["DIAG002", "DIAG003", "DIAG004"],
        "name": "Anatomy",
        "FK_Diagnosis_Content_ID": 6,
        "FK_Diagnosis_Category_ID": 2
      }
    ]
  }
]

I am using a dynamic state handling function like the one below:

onChangeTextPress(key, value){
  this.state.selected[key] = value
  //another code
}

The example of this.state.selected is

[ 'Primary Category': 'Fracture', Anatomy: 'Hip']

I want to extract the values of FK_Diagnosis_Content_ID based on the keys and values stored in this.state.selected.

For example, given the current content of selected, the expected result would be: [3, 4]

This output is derived by matching the key-value pairs in the JSON data with the corresponding entries in the this.state.selected object. In this case, it relates to the name and value fields.

If more clarification is needed, please feel free to ask any questions.

I appreciate any help or insights provided.

javascript json react-native

Answer 1

Answer №1

If you're looking to utilize the power of Object.keys() and Array.prototype.includes(), here are some samples that demonstrate their usage.

Example 1

// Assume we have the following data structure
const data = { 'Primary Category': 'Fracture', Anatomy: 'Hip' }

Object.keys(data).forEach((key) => console.log(key))
// Output: 
// Primary Category
// Anatomy

To retrieve the desired value, consider the following approach:

Example 2

// Assuming this.state.selected contains { 'Primary Category': 'Fracture', Anatomy: 'Hip' }
const keys = Object.keys(this.state.selected);
const result = [];
this.state.data.forEach((d) => {
  if(keys.includes(d.name)) { 
    d.value.forEach((v) => {
      if(v.value === this.state.selected[d.name]) {
        result.push(v['FK_Diagnosis_Content_ID']);
      }
    })
  }
});
console.log(result);
// Output: [3,4]

Example 3

// Assuming this.state.selected is [{ 'Primary Category': 'Fracture'}, {Anatomy: 'Hip' }]
// Since each object contains only one key
const keys = this.state.selected.map((s) => Object.keys(s)[0])
const result = [];
this.state.data.forEach((d) => {
  if(keys.includes(d.name)) { 
    d.value.forEach((v) => {
      if(v.value === this.state.selected[keys.indexOf(d.name)][d.name]) {
        result.push(v['FK_Diagnosis_Content_ID']);
      }
    })
  }
});
console.log(result);
// Output: [3,4]

Answer 2

If you're looking to utilize the power of Object.keys() and Array.prototype.includes(), here are some samples that demonstrate their usage.

Example 1

// Assume we have the following data structure
const data = { 'Primary Category': 'Fracture', Anatomy: 'Hip' }

Object.keys(data).forEach((key) => console.log(key))
// Output: 
// Primary Category
// Anatomy

To retrieve the desired value, consider the following approach:

Example 2

// Assuming this.state.selected contains { 'Primary Category': 'Fracture', Anatomy: 'Hip' }
const keys = Object.keys(this.state.selected);
const result = [];
this.state.data.forEach((d) => {
  if(keys.includes(d.name)) { 
    d.value.forEach((v) => {
      if(v.value === this.state.selected[d.name]) {
        result.push(v['FK_Diagnosis_Content_ID']);
      }
    })
  }
});
console.log(result);
// Output: [3,4]

Example 3

// Assuming this.state.selected is [{ 'Primary Category': 'Fracture'}, {Anatomy: 'Hip' }]
// Since each object contains only one key
const keys = this.state.selected.map((s) => Object.keys(s)[0])
const result = [];
this.state.data.forEach((d) => {
  if(keys.includes(d.name)) { 
    d.value.forEach((v) => {
      if(v.value === this.state.selected[keys.indexOf(d.name)][d.name]) {
        result.push(v['FK_Diagnosis_Content_ID']);
      }
    })
  }
});
console.log(result);
// Output: [3,4]

Answer 3

Answer №2

Utilize this code snippet in your project:

const keys = Object.keys(this.state.selected);
const result = [];
this.state.data.forEach((item) => {
  if (keys.includes(item.tag)) { 
    item.value.forEach((val) => {
      if (val.value === this.state.selected[item.name]) {
        result.push(val['FK_Diagnosis_Content_ID']);
      }
    });
  }
});
console.log(result);

Answer 4

Utilize this code snippet in your project:

const keys = Object.keys(this.state.selected);
const result = [];
this.state.data.forEach((item) => {
  if (keys.includes(item.tag)) { 
    item.value.forEach((val) => {
      if (val.value === this.state.selected[item.name]) {
        result.push(val['FK_Diagnosis_Content_ID']);
      }
    });
  }
});
console.log(result);

Obtain JSON value based on changing state in React Native

Answer №1

Answer №2

Similar questions

Solving repeated function firing with ng-checked in an AngularJS ng-repeat loop

Learning the process of connecting functions to events

Make sure that the function displays the output once it has been received using the jQuery.get method

Tips for resolving: Alert: React does not allow functions as a child component

Obtain HTML controls in the code-behind of an ASP.NET application

I am attempting to expand an array of objects divided into two distinct inputs within a React component

Showcasing JavaScript variable in HTML with Vue.js

Tinymce editor does not display icons as expected

What is the process for adding information to datatables using jQuery?

text field remaining populated

Align the content to the right and center it within the table

Utilizing map in React JS to simultaneously execute various functions

IBM MobileFirst 8 Java Adapter does not currently support JSON data containing arrays in the request body

Create a copy of a div element once the value of a select element has

Cut down the length of an audio clip with javascript (beginning 3 seconds)

X-ray Picker failing to retrieve a value

Changing the position of elements dynamically in Javascript by altering their absolute positioning

Is it possible to precisely position multiple children in a relative manner?

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Troubleshooting Problems with File Upload Response in ASP.Net MVC Ajax.BeginForm