How can I retrieve data from a JSON string using Javascript?

Here is the JSON data I am working with:

{
   "head":{
      "vars":[
         "uri",
         "label"
      ]
   },
   "results":{
      "bindings":[
         {
            "uri":{
               "type":"uri",
               "value":"http://tematres.befdata.biow.uni-leipzig.de/vocab/?tema=751"
            },
            "label":{
               "type":"literal",
               "xml:lang":"en",
               "value":"15n"
            }
         },
         {
            "uri":{
               "type":"uri",
               "value":"http://tematres.befdata.biow.uni-leipzig.de/vocab/?tema=916"
            },
            "label":{
               "type":"literal",
               "xml:lang":"en",
               "value":"16s analysis"
            }
         },
         {
            "uri":{
               "type":"uri",
               "value":"http://tematres.befdata.biow.uni-leipzig.de/vocab/?tema=622"
            },
            "label":{
               "type":"literal",
               "xml:lang":"en",
               "value":"16s rrna"
            }
         },
         {
            "uri":{
               "type":"uri",
               "value":"http://tematres.befdata.biow.uni-leipzig.de/vocab/?tema=917"
            },
            "label":{
               "type":"literal",
               "xml:lang":"en",
               "value":"16s rrna gene analysis"
            }
         },
         {
            "uri":{
               "type":"uri",
               "value":"http://tematres.befdata.biow.uni-leipzig.de/vocab/?tema=618"
            },
            "label":{
               "type":"literal",
               "xml:lang":"en",
               "value":"18s rdna"
            }
         }
      ]
   }
}

I am looking for a way to extract only the uri and corresponding label values in a map or similar format, so that I can easily populate a table with these values later on.

javascriptjson

Answer №1

Utilize the map method to extract specific data into an array. By including labels and URIs within objects, you can easily iterate over them as needed:

var extractedData = json.results.bindings.map(function (element) {
    return { uri: element.uri.value, label: element.label.value };
});

DEMO

Answer №2

To easily loop through, follow this code snippet:

json = "your json";

yourArray = [];
for(var i = 0; i < json.results.bindings.length; i++){ 

    yourArray[i]= [json.results.bindings[i].uri.value, json.results.bindings[i].label.value ];


}
console.log(yourArray);

You can view a working demo on this fiddle:

http://jsfiddle.net/xyek6wda/4/

Observe the console for the array outputting uri and label pairs.

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

Angular ng-show does not seem to evaluate properly

After receiving the JSON array object below: "Tools": [ { "name": "Submit a Claim", "position": 1, "isOn": true, "alert": null }, { "name": "My Recurring Claims", "position": 2, "isOn": true, "alert": null }, { "name": "Online Enrollment ...

htmlarraysangularjsjson

The Javascript functionality does not seem to be functioning properly within the Bootstrap navigation

I'm having an issue with my Bootstrap navbar JavaScript. Below is the code that's causing the problem: <script type="text/javascript"> $(".nav a").on("click", function () { $(".nav").find(".active").removeClass("active"); $(this).p ...

javascriptjquerytwitter-bootstrapnavbar

How to generate malformed JSON using Newtonsoft.Json - Is it possible to permit invalid objects?

Intentionally creating invalid JSON using Newtonsoft Json to incorporate an ESI include tag, which will retrieve two additional json nodes. This is the WriteJson method of my JsonConverter: public override void WriteJson(JsonWriter writer, object value, ...

c#jsonjson.netesi

Retrieving JSON data using PHP functions

I am currently exploring the world of JSON and have come across a file named mysql_conn.php. This file contains a PHP function that retrieves data from a MySQL database. I'm wondering if anyone can assist me in creating a JSON file to extract data fro ...

phpmysqljsonfunction

Incorporating React into a non-React website

I am currently working on a project where the server renders all views using the Twig template engine. Therefore, I tend to write all my scripts within the .twig templates. Take, for instance, the aside-buttons.twig template: <div class="aside-butto ...

javascriptreactjstwig

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

Looking to scan Barcode and Qrcode on Android, iPhone, and iPad devices for a project that is built on AngularJS and HTML5 as a mobile website. The requirement is not to download any third-party native application on the device, ruling out the use of nati ...

javascriptjqueryhtmlangularjs

Sending AJAX request within a Twitter Bootstrap modal in Symfony2

After exhausting countless Google and StackOverflow search results, I have come to the conclusion that seeking help is my best option. I am currently developing a Symfony2 application. In every view of my app, I have integrated a Twitter Bootstrap modal e ...

javascriptjqueryajaxtwitter-bootstrapmodal-dialog

I am experiencing difficulties in initializing a class (controller) in Nextjs version 13

I am working on an application built with Next.js where I have a controller class responsible for handling all the access functions, such as retrieving data from the database. However, I keep encountering this error message: Error [ReferenceError]: Cannot ...

javascriptreactjsnext.jsimportcontroller

Encountering issues with link button redirection

I have a question regarding a Link element and CustomButton element with an onClick handler. < Link to = "/dashboard" style = { linkStyles } > < CustomButton text = "Login" onClick = { handleSubmit } /> < /Link> The code ...

javascriptreactjsmaterial-ui

Challenges with browsing navigation in Selenium WebDriver

Recently, I began my journey of learning selenium WebDriver. In an attempt to automate the task of logging into an account using the Firefox browser, I encountered a discrepancy. Manually opening the browser and clicking on the login link from the homepag ...

javascriptjavaseleniumselenium-webdriverautomated-tests

Tips for verifying if two passwords match during registration and displaying an error message if they do not match

How can I ensure that the passwords entered in a registration form match and how do I validate the entire form to be correct? <form id="registerForm" method="POST" action="/register" class="form2"> ...

javascripthtmlcss

What is the best approach to conceal elements from the main template in Meteor using a template event?

I have a main template along with two others that are displayed using Iron routing: <template name="main"> <div id="templateMain" name="templateMain"> <a href="nfnoscar">The Legend of NFN Oscar</a> <br/> <a h ...

javascriptjquerytemplatesmeteormeteor-blaze

Create a class for the grandparent element

Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...

javascriptjqueryhtmlcssdrop-down-menu

Tips for activating multiple CSS animations when scrolling

I am currently working on a project that involves multiple CSS animations. However, I am facing an issue where these animations only occur once when the page initially loads. I would like them to trigger every time the user scrolls past them, regardless of ...

javascripthtmlcsscss-animations

Exploring Variable Nested Field Names in Mongodb Queries

My MongoDB database has a structured format, like the example shown below: [ { "subject_id": "1", "name": "Maria", "dob": "1/1/00", "gender": "F", "visits": { "1/1/18": { "date_entere ...

jsonmongodb

Using a Javascript array within a Bootstrap carousel allows for dynamic content to

I am looking to incorporate my javascript array into a bootstrap carousel so that the carousel can display all the elements from the array and determine which picture should be shown based on the data. I also want it to display the title, subtitle, and alt ...

javascriptbootstrap-4

What are the steps for utilizing the Object.entries(...) method along with .forEach and .every

Using a constant queryModifier = {price: "lessThan", weight: "greaterThan"}, I am filtering a list. const queryKeys = keys: { price: '1000', weight: '1000' } const list = [ { // object data here }, { // o ...

javascriptnode.jsreactjs

iOS Simulator offers a range of both offline and online events for testing purposes

I have been working on a phonegap 3.3 application that incorporates angularjs. When testing the application in my browser, I am successfully able to detect and respond to 'offline' and 'online' events. However, when I switch to the ios ...

javascriptiosangularjscordova

What is the best way to adjust the JSON output in CakePHP?

In my Android Application, I am using CakePHP to deliver JSON data. Within my model, I have a function that retrieves the nearest locations within a specified radius of a given place: public function getNearest($lat = 54.980503, $lng = -1.614349, $radius ...

phpjsoncakephp

Emulate a mouse click on an Angular element

I am facing a challenge where I need to execute Angular controller functions from outside of the application. Due to simplicity reasons, I am unable to make modifications directly to the Angular app itself. Ideally, the code should be able to run in the br ...

javascriptangularjs