Navigating to lower levels of JSON data in JavaScript instead of starting with the top level

Question

Navigating to lower levels of JSON data in JavaScript instead of starting with the top level

Using a microservice, I fetch multiple sets of JSON data and display them on a Vue.js-powered page. The structure of the data is as follows:

{"data":{"getcompanies":
  [
   {"id":6,"name":"Arena","address":"12 Baker Street","zip":"15090"}, 
   {"id":7,"name":"McMillan","address":null,"zip":"15090"},
   {"id":8,"name":"Ball","address":"342 Farm Road","zip":"15090"}
  ]
 }}

{"data":{"getusers":
  [{"id":22,"name":"Fred","address":"Parmesean Street","zip":"15090"}, 
   {"id":24,"name":"George","address":"Loopy Lane","zip":"15090"},
   {"id":25,"name":"Lucy","address":"Farm Road","zip":"15090"}]}}

{"data":{"getdevices":
  [{"id":2,"name":"device type 1"}, 
   {"id":4,"name":"device type 2"},
   {"id":5,"name":"device type 3"}]}}

I have successfully extracted this data individually using code like this:

getCompanies() {
  this.sendMicroServiceRequest({
    method: 'GET',
    url: `api/authenticated/function/getcompanies`
  })
  .then((response) => {
    if(response.data) {
      this.dataCompanies = response.data.getcompanies    
    } else {
      console.error(response)
    }
  }).catch(console.error)
}

The methods getUsers() and getDevices() function in a similar manner. The output of getCompanies() is:

[{"id":6,"name":"Arena","address":"12 Baker Street","zip":"15090"}, 
 {"id":7,"name":"McMillan","address":null,"zip":"15090"},
 {"id":8,"name":"Ball","address":"342 Farm Road","zip":"15090"}]

This data is then displayed in a table on the Vue template without any issues.

However, managing additional microservices calls could become cumbersome in the future.

I am seeking a more efficient way to bypass the response.data.*whatever* and directly access those id records with a reusable call. Unfortunately, I am facing challenges in achieving this. I have tried various approaches but haven't been successful in accessing the required data chunk smoothly.

Even though my latest attempt does yield results, it presents individual array elements which I would prefer to avoid manipulating into a JSON structure.

If you have any suggestions, hints, or guidance on how to streamline this process, please share your insights. They will be greatly appreciated!

javascript json javascript-objects

Answer 1

Answer №1

In my opinion, it's more beneficial to explicitly state how you are accessing the object. It appears that the object key aligns with the name of the microservice function. If this is the case:

getData(functionName) {
    return this.sendMicroServiceRequest({
        method: 'GET',
        url: "api/authenticated/function/" + functionName
    })
    .then( response => response.data[functionName] )
}
getCompanies(){
    this.getData("getcompanies").then(companies => {
        this.dataCompanies = companies
    })
}

Answer 2

In my opinion, it's more beneficial to explicitly state how you are accessing the object. It appears that the object key aligns with the name of the microservice function. If this is the case:

getData(functionName) {
    return this.sendMicroServiceRequest({
        method: 'GET',
        url: "api/authenticated/function/" + functionName
    })
    .then( response => response.data[functionName] )
}
getCompanies(){
    this.getData("getcompanies").then(companies => {
        this.dataCompanies = companies
    })
}

Answer 3

Answer №2

let arr = {info: ['y']};
let obj = {info: {getdata: 'y'}};

console.log(arr.info[0]);
console.log(Object.values(obj.info)[0]);

arr.data[0] is suitable if data was an array. If you want the first element of an object, use Object.values(response.info)[0] instead. The method Object.values changes an object to an array of its values.

The methods Object.keys and Object.entries also provide arrays of keys and key-value pairs respectively.

Note that objects do not guarantee order, so this only works in your scenario because info has only one key and value pair. In other cases, you may need to iterate through the entries to find the specific entry you seek.

Answer 4

let arr = {info: ['y']};
let obj = {info: {getdata: 'y'}};

console.log(arr.info[0]);
console.log(Object.values(obj.info)[0]);

arr.data[0] is suitable if data was an array. If you want the first element of an object, use Object.values(response.info)[0] instead. The method Object.values changes an object to an array of its values.

The methods Object.keys and Object.entries also provide arrays of keys and key-value pairs respectively.

Note that objects do not guarantee order, so this only works in your scenario because info has only one key and value pair. In other cases, you may need to iterate through the entries to find the specific entry you seek.

Answer 5

Answer №3

startValue

We will kick things off with a basic function called startValue. This function retrieves the first value from an object, or throws an error if no value is found -

const x = { something: "foo" }
const y = {}

const startValue = t =>
{ const v = Object.values(t)
  if (v.length)
    return v[0]
  else
    throw Error("empty data")
}

console.log(startValue(x)) // "foo"
console.log(startValue(y)) // Error: empty data

fetchData

Next up, we create a generic function called fetchData. We utilize our startValue function within this chain without including any console.log or .catch; that decision is left to the caller -

fetchData(url) {
  return this
    .sendMicroServiceRequest({ method: "GET", url })
    .then(response => {
      if (response.data)
        return response.data
      else
        return Promise.reject(response)
    })
    .then(startValue)
}

Subsequently, we define fetchCompanies, fetchUsers, and so on -

fetchCompanies() {
  return fetchData("api/authenticated/function/getcompanies")
}

fetchUsers() {
  return fetchData("api/authenticated/function/getusers")
}

//...

async and await

To enhance the fetchData function, consider implementing async and await -

async fetchData(url) {
  const response =
    await this.sendMicroServiceRequest({ method: "GET", url })
  return response.data
    ? startValue(response.data)
    : Promise.reject(response)
}

demonstrating the power of generics

It could be argued that the need for the fetch* functions has diminished -

async getAll() {
  return {
    companies:
      await fetchData("api/authenticated/function/getcompanies"),
    users:
      await fetchData("api/authenticated/function/getusers"),
    devices:
      await fetchData("api/authenticated/function/getdevices"),
    // ...
  }
}

In the example above, three requests using await fetchData(...) are made sequentially. If you prefer parallel execution, the following demonstrates how to achieve that -

async getAll() {
  const requests = [
    fetchData("api/authenticated/function/getcompanies"),
    fetchData("api/authenticated/function/getusers"),
    fetchData("api/authenticated/function/getdevices")
  ]
  const [companies, users, devices] = Promise.all(requests)
  return { companies, users, devices }
}

handling errors

Lastly, error handling should be left to the caller and not incorporated into our generic functions -

this.getAll()
  .then(data => this.render(data)) // some Vue template
  .catch(console.error)

Answer 6

startValue

We will kick things off with a basic function called startValue. This function retrieves the first value from an object, or throws an error if no value is found -

const x = { something: "foo" }
const y = {}

const startValue = t =>
{ const v = Object.values(t)
  if (v.length)
    return v[0]
  else
    throw Error("empty data")
}

console.log(startValue(x)) // "foo"
console.log(startValue(y)) // Error: empty data

fetchData

Next up, we create a generic function called fetchData. We utilize our startValue function within this chain without including any console.log or .catch; that decision is left to the caller -

fetchData(url) {
  return this
    .sendMicroServiceRequest({ method: "GET", url })
    .then(response => {
      if (response.data)
        return response.data
      else
        return Promise.reject(response)
    })
    .then(startValue)
}

Subsequently, we define fetchCompanies, fetchUsers, and so on -

fetchCompanies() {
  return fetchData("api/authenticated/function/getcompanies")
}

fetchUsers() {
  return fetchData("api/authenticated/function/getusers")
}

//...

async and await

To enhance the fetchData function, consider implementing async and await -

async fetchData(url) {
  const response =
    await this.sendMicroServiceRequest({ method: "GET", url })
  return response.data
    ? startValue(response.data)
    : Promise.reject(response)
}

demonstrating the power of generics

It could be argued that the need for the fetch* functions has diminished -

async getAll() {
  return {
    companies:
      await fetchData("api/authenticated/function/getcompanies"),
    users:
      await fetchData("api/authenticated/function/getusers"),
    devices:
      await fetchData("api/authenticated/function/getdevices"),
    // ...
  }
}

In the example above, three requests using await fetchData(...) are made sequentially. If you prefer parallel execution, the following demonstrates how to achieve that -

async getAll() {
  const requests = [
    fetchData("api/authenticated/function/getcompanies"),
    fetchData("api/authenticated/function/getusers"),
    fetchData("api/authenticated/function/getdevices")
  ]
  const [companies, users, devices] = Promise.all(requests)
  return { companies, users, devices }
}

handling errors

Lastly, error handling should be left to the caller and not incorporated into our generic functions -

this.getAll()
  .then(data => this.render(data)) // some Vue template
  .catch(console.error)

Navigating to lower levels of JSON data in JavaScript instead of starting with the top level

Answer №1

Answer №2

Answer №3

Similar questions

Invoking a Method in a React Component from its Parent Component

The jQuery slider's next button is not functioning as intended

Is there a way to stop a music track from playing?

Using AJAX/JQuery along with PHP to instantly send notifications without refreshing the page for a contact form

Creating dynamic images in Node.js using JavaScript without relying on HTML5 canvas

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

Is there a method to obtain specific props for focused tabBar badges to customize the background color accordingly?

How can you access the URL of a resource action in Angular?

Is it possible to pass a random variable into an included template in Jade?

Step-by-step guide on generating a JSON object list in Python 2.7

An alternative to PHP's exec function in Node.js

Submitting a Yii 2 form automatically when it loads

Tips for overriding ng-disable in AngularJSUnleashing the

Is there a way to reverse the upside-down text generated by OffscreenCanvas.getContext().fillText()?

I am looking to adjust the height of my MUI Grid component

What is the best way to create a text input that is both secure and non-editable?

Failed to retrieve the JSON data table

Connecting a Vue js model data to a Select2 select box

Can React-Select be utilized in the browser directly from the CDN?

What is the best way to retrieve the name of an element or component using JavaScript