How can I retrieve the top-level key based on a value within a JSON object nested in JavaScript?

If I have the value Africola for key name in the following nested JSON structure, how can I retrieve its corresponding upper-level key 'barID1' using JavaScript?

{
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": “description text”,
    "imgURLs": [ "Https:url1”,  "https:url2”, "https:url3” ],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url”
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
     "description": “description text”,
    "imgURLs": [ "Https:url1”,  "https:url2”, "https:url3” ],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url”
  }
}
javascriptarraysjsonobject

Answer №1

Your JSON data contained invalid characters which caused it to be malformed. Try using the find method on keys

let obj = {
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url"
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
     "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url"
  }
};

let result = Object.keys(obj).find(key => obj[key].name === "Africola");
console.log(result);

Converted into a function:

let obj = {
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url"
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
     "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url"
  }
};

const findKeyByName = (obj, search) => Object.keys(obj).find(key => obj[key].name === search);

console.log(findKeyByName(obj, 'Africola'));
console.log(findKeyByName(obj,'Disco Mexico Taqueria'));

Answer №2

To efficiently find a specific value in an object, you can combine the use of Object.entries() with Array.find(). Here is an example:

const input = {
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url"
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
     "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url"
  }
};

let [key, val] = Object.entries(input).find(
    ([k, v]) => v.name === "Africola"
);

console.log("key is :", key);
console.log("value is :", val);

Answer №3

To solve this problem, I recommend using the Object.entries() and Array.find() methods.

const data = {
  "barID1": {
    "address": "4 East Terrace, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
    "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.810585,
    "lon": 138.616739,
    "name": "Africola",
    "phone": "(08) 8223 3885",
    "status": "active",
    "venueImgURL": "https:url"
  },
  "barID2": {
    "address": "138/140 Gouger St, Sydney NSW 2000",
    "appStoreURL": "http://itunes.apple.com/app/idXXXXXXXXX",
     "description": "description text",
    "imgURLs": [ "Https:url1",  "https:url2", "https:url3" ],
    "lat": -34.848082,
    "lon": 138.599813,
    "name": "Disco Mexico Taqueria",
    "phone": "0416 855 108",
    "status": "active",
    "venueImgURL": "https:url"
  }
};

const [key, obj] = Object.entries(data).find(([key, obj]) => {
  return obj.name === 'Africola';
});

console.log(key, obj);

You can view a working example on Fiddle: https://jsfiddle.net/zty6fgcp/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform Dictionary Containing Lists into CSV Format

Data Source Here is the initial JSON structure: { "foo":[ "asd", "fgh" ], "bar":[ "abc", "xyz", "ert" ], "baz":[ ...

jsonjqexport-to-csv

While the Navbar component functions properly under regular circumstances, it experiences difficulties when used in conjunction with getStaticProps

https://i.stack.imgur.com/zmnYu.pngI have been facing an issue while trying to implement getstaticprops on my page. Whenever I try to include my navbar component, the console throws an error stating that the element type is invalid. Interestingly, I am abl ...

javascriptreactjsnext.js

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

javascriptjqueryhtmliframecross-domain

Is there a way to automatically determine the text direction based on the language in the input text?

When posting in Google Plus (and other platforms), I noticed that when I type in Persian, which is a right-to-left language, the text direction changes automatically to rtl and text-alignment:right. However, when I switch to English, the direction switches ...

javascripthtmlcssbidi

Converting every element in an array into individual hash values?

Query for beginners: I am working with an array called data. It is made up of an array of hashes extracted from a CSV file: [ {:status=>"new", :number=>"215", :subject=>"25", :case=>"First", :attachment=>"alpha, beta"}, {:status=>"old", ...

arraysrubyhashiteration

Constructing a Primeng MessageService causes a blank webpage to appear

After downloading the QuickStart CLI of PrimeNG for Angular, I added a second component for a chart that was already included in the UI components. Everything seemed to be set up correctly, but when I saved, I ended up with a completely blank page for the ...

javascriptangularchartsprimeng

Store my JSON data in a separate file and then reference it in my controller

Hello, I am currently working on an AngularJS application development project. Within my JSON data, I have information structured like this: angular.module('app', []).controller('MainController', ['$scope', function($scope) { ...

javascriptangularjsjson

Function wrapper intended for axios

How can I create a wrapper function for axios? I am looking to create a function that can return axios, allowing for easy substitution with another fetch API in the future. This is what I have attempted so far: import axios from 'axios' expor ...

javascriptreactjsaxios

Using Silverstripe to Transform Twitter JSON Data into Dataobject for Template Iteration

I am currently utilizing the twitter API to fetch a timeline that I intend to display in my template. The code below demonstrates how I am retrieving the feed: public static function getTwitterFeed(){ $settings = array( 'oauth_access_toke ...

jsontwittersilverstripe

Index beyond bounds of array

As I approach the completion of my assignment, I am encountering a challenge while attempting to create a map using a nested for loop. Below is the code segment along with the error message that I am facing: public void draw(){ System.out.println("Initia ...

javaarraysindexing

Exploring Laravel 4: Controlling AJAX data manipulation via the controller

I am a beginner in using Laravel and ajax. Currently, I am working on retrieving data from a form through ajax and calling a controller method using ajax as well. The controller method searches the database and returns a json response to be handled by ajax ...

javascriptphpjqueryajaxlaravel-4

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

javascripthtmlangularjs

Dividing the JSON dataset into smaller segments

Here is an example demonstrating how to split the JSON data: var data = [ { BankName: 'SBI', IFSC: 'SBIN0002688' }, { BankName: 'ICICI', IFSC: 'ICIC0003931', MICR: '500229094'}, { BankName: 'RBI ...

javascriptnode.js

What is the fastest way to invoke the driver.quit() method in Selenium?

Is there a way to force close the browser immediately instead of waiting for it to complete loading before calling driver.quit()? ...

javascriptnode.jsseleniumselenium-webdriverpageloadstrategy

Attempting to display my ejs template from a node server following the activation of a delete button, all without utilizing ajax

I have created a basic blog application using node.js for the backend and ejs for the frontend. Posting blogs using a web form works well by calling a post route. Now, I am facing an issue with implementing a delete button for each blog post. The current s ...

javascriptnode.jsejs

Guidelines for utilizing regex to match this specific string

Hey guys, I need help with parsing this string (a url). example.html/#playYouTubeVideo=id[lBs8jPDPveg]&width[160]&height[90] I'm trying to extract the values for id, width, and height within brackets. This is what I've come up with: [ ...

phpjavascriptjqueryregex

jQuery struggles to process large response

I am currently developing an application that sends requests to a URL and parses the table found in the HTML response using jQuery. While this method works well for smaller amounts of HTML code, it runs into issues with larger datasets. The problem arises ...

javascripthtmljquery

How can I use Angular to toggle a submenu based on a data-target attribute when clicked?

Struggling to implement a functionality using ng-click to retrieve the data-target attribute of a clicked angular material md-button, in order to display the submenu when a topic is clicked on the sidenav. The navigation structure consists of md-list with ...

javascriptjqueryhtmlangularjs

Received extra keys from getStaticPaths in NextJs

Currently engrossed in a project for a client using NextJs, The blog section comprises various paths like blog/[:category], blog/[:category]/[:post], and blog/author/[:author]. To achieve this, I am utilizing getStaticPaths and getStaticProps. My approach ...

javascriptpathnext.js

Combining jQuery form validation with a PHP script on a single webpage

After implementing jQuery form validation and redirecting using the function btn_onclick() { window.location.href = "http://localhost/loginprivate.php";} from index.php to loginprivate.php, my web app's PHP script is not being executed. The user is re ...

javascriptphpjqueryhtml