Exploring key value pairs dynamically in JavaScript

Question

Exploring key value pairs dynamically in JavaScript

I have a JSON object containing HTTP request information:

"http": {
    "method": "POST",
    "headers": [{
        "content-type": "application/json"
    }, {
        "Authorization": "KKYZASSHUYTRJ"
    }],
    "url": "http://localhost:8888/download/context"
}

Within this JSON, I need to access the headers and iterate through the array. The keys of the "headers" object are subject to change. I am seeking a method in Typescript/Javascript to retrieve both the keys and values from the headers in order to construct an HTTP call.

While many Stackoverflow articles provide solutions for accessing values using keys, I am specifically inquiring about how to handle both keys and values.

Although Object.getkeys() and Object.getValues() are available, they are not compatible with Safari. As a result, I am exploring alternative methods.

javascript json typescript

Answer 1

Answer №1

One useful feature is that Object.keys is supported in Safari browsers.

var data = {
    "http": {
        "method": "POST",
        "headers": [{"content-type": "application/json" },{ "Authorization": "KKYZASSHUYTRJ"}],
    "url": "http://localhost:8888/download/context"
    }
}


data["http"]["headers"].forEach(entry => console.log(Object.keys(entry)[0], entry[Object.keys(entry)[0]]))

Answer 2

One useful feature is that Object.keys is supported in Safari browsers.

var data = {
    "http": {
        "method": "POST",
        "headers": [{"content-type": "application/json" },{ "Authorization": "KKYZASSHUYTRJ"}],
    "url": "http://localhost:8888/download/context"
    }
}


data["http"]["headers"].forEach(entry => console.log(Object.keys(entry)[0], entry[Object.keys(entry)[0]]))

Answer 3

Answer №2

To avoid transpiling this code snippet, you can simply replace the let/const declarations with var. The template string used for the JSON could be replaced with actual API data during implementation, don't you think?

var json = JSON.parse(`
{
  "http": {
    "method": "POST",
    "headers": [{
        "content-type": "application/json"
    }, {
        "Authorization": "KKYZASSHUYTRJ"
    }],
    "url": "http://localhost:8888/download/context"
  }
}`);

if(typeof json.http !== "undefined" && typeof json.http["headers"] !== "undefined"){
  const headers = json.http["headers"];
  for(var i = 0; i < headers.length; ++i){
    for(var key in headers[i]){
      console.log(key, ":", headers[i][key])
    }
  }
}

Answer 4

To avoid transpiling this code snippet, you can simply replace the let/const declarations with var. The template string used for the JSON could be replaced with actual API data during implementation, don't you think?

var json = JSON.parse(`
{
  "http": {
    "method": "POST",
    "headers": [{
        "content-type": "application/json"
    }, {
        "Authorization": "KKYZASSHUYTRJ"
    }],
    "url": "http://localhost:8888/download/context"
  }
}`);

if(typeof json.http !== "undefined" && typeof json.http["headers"] !== "undefined"){
  const headers = json.http["headers"];
  for(var i = 0; i < headers.length; ++i){
    for(var key in headers[i]){
      console.log(key, ":", headers[i][key])
    }
  }
}

Exploring key value pairs dynamically in JavaScript

Answer №1

Answer №2

Similar questions

Leverage the power of dynamic PHP variables within your JavaScript code

Storing ng-change event for a checkbox in AngularJS in a valid manner

Using AJAX to Send Requests to PHP

Utilize the asynchronous power of Morgan to quickly display your

Adjust the initial letter of every word with JQ Capitalization

Leveraging Global Variables for Validation in Angular (Angular 10)

Is there a way to signal an error within an Observable function that can handle multiple scenarios depending on the specific page being viewed in an Angular application?

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

The response you have received is delayed by one response

Renew The Dining Surface

A step-by-step guide to setting up a custom splash screen for React Native

What is the best way to use Jquery ScrollTo() to navigate to an element on a page using a class selector

The GET method is unable to process the body

How can we incorporate methods using TypeScript?

Embed the picture into the wall

We encountered an issue: Headers cannot be set after they have been sent while attempting to read files

Transform into specialized class by employing GSON and Generics with Kotlin in the XPLPC initiative

Click to open the file browser by using the onclick event in Material-table actions

The specified argument type 'AsyncThunkAction<any, number | undefined, {}>' cannot be assigned to the parameter type 'AnyAction'

In JavaScript, where are the values saved?