Guide to extracting information from JSON using JavaScript

There is a JSON file named devices.json that contains information about various devices:

{
  "Android":[
    {"modell":"Samsung Galaxy S9+", "version":"8.0", "formfactor":"smartphone"},
    {"modell":"Google Pixel 2XL", "version":"9.0", "formfactor":"smartphone"},
    {"modell":"OnePlus One+", "version":"7.1.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (3rd Generation)", "version":"6.0.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (1st Generation)", "version":"5.1", "formfactor":"smartphone"},
    {"modell":"Phicomm Clue C230", "version":"4.3", "formfactor":"smartphone"},
    {"modell":"Huawei MediaPad M3 Lite 8", "version":"7.0", "formfactor":"tablet"},
    {"modell":"Xiaomi Mi Pad", "version":"5.1", "formfactor":"tablet"},
    {"modell":"Samsung Galaxy Tab 3 (7.0) Lite", "version":"4.2.2", "formfactor":"tablet"},
    {"modell":"Amazon Fire Tablet 7 (5th Gen)", "version":"Fire OS 5.3.3", "formfactor":"tablet"}
  ],
  "iOS":[
    {"modell":"iPhone 7", "version":"12beta", "formfactor":"smartphone"},
    {"modell":"iPhone 5s", "version":"11.4.1", "formfactor":"smartphone"},
    {"modell":"iPad Air", "version":"11.4.1", "formfactor":"tablet"},
    {"modell":"iPad 3", "version":"9.3.5", "formfactor":"tablet"}
  ],
  "Windows":[
    {"version":"Windows 10"},
    {"version":"Windows 8.1"},
    {"version":"Windows 7"}
  ],
  "macOS":[
    {"modell":"Macbook Air", "version":"10.13.5"}
  ],
  "Linux":[
    {"version":"Mint"},
    {"version":"Kubuntu"},
    {"version":"elemetaryOS"},
    {"version":"openSUSE"},
    {"version":"CentOS"},
    {"version":"Fedora"},
    {"version":"Oracle Linux"},
    {"version":"Red Hat"}
  ]
}

I would like to parse this JSON data and display it in a particular format when a button is clicked:

Samsung Galaxy S9+ (Android 8.0), Google Pixel 2XL (Android 9), OnePlus One, etc...

However, I am unsure of the best way to parse the JSON data. Would something like this work?

<script>
   function getArray(){
    return $.getJSON('devices.json');
}

getArray().done( function(json) {
    console.log(json); // show the json data in console

    // Android
    for(var i = 0; i < json.Android.length; i++) {
        var obj = json.Android[i];

        console.log(obj);
    }

    // iOS
    for(var i = 0; i < json.iOS.length; i++) {
        var obj = json.iOS[i];

        console.log(obj);
    }

});
</script>
javascriptjsonparsing

Answer №1

To easily access and display the information from json.Android, simply use the map function and log the values.

var data ={
  "Android":[
    {"modell":"Samsung Galaxy S9+", "version":"8.0", "formfactor":"smartphone"},
    {"modell":"Google Pixel 2XL", "version":"9.0", "formfactor":"smartphone"},
    {"modell":"OnePlus One+", "version":"7.1.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (3rd Generation)", "version":"6.0.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (1st Generation)", "version":"5.1", "formfactor":"smartphone"},
    {"modell":"Phicomm Clue C230", "version":"4.3", "formfactor":"smartphone"},
    {"modell":"Huawei MediaPad M3 Lite 8", "version":"7.0", "formfactor":"tablet"},
    {"modell":"Xiaomi Mi Pad", "version":"5.1", "formfactor":"tablet"},
    {"modell":"Samsung Galaxy Tab 3 (7.0) Lite", "version":"4.2.2", "formfactor":"tablet"},
    {"modell":"Amazon Fire Tablet 7 (5th Gen)", "version":"Fire OS 5.3.3", "formfactor":"tablet"}
  ],
  "iOS":[
    {"modell":"iPhone 7", "version":"12beta", "formfactor":"smartphone"},
    {"modell":"iPhone 5s", "version":"11.4.1", "formfactor":"smartphone"},
    {"modell":"iPad Air", "version":"11.4.1", "formfactor":"tablet"},
    {"modell":"iPad 3", "version":"9.3.5", "formfactor":"tablet"}
  ],
  "Windows":[
    {"version":"Windows 10"},
    {"version":"Windows 8.1"},
    {"version":"Windows 7"}
  ],
  "macOS":[
    {"modell":"Macbook Air", "version":"10.13.5"}
  ],
  "Linux":[
    {"version":"Mint"},
    {"version":"Kubuntu"},
    {"version":"elemetaryOS"},
    {"version":"openSUSE"},
    {"version":"CentOS"},
    {"version":"Fedora"},
    {"version":"Oracle Linux"},
    {"version":"Red Hat"}
  ]
};

function test(){
  console.log(data.Android.map(function(item){
    return item.modell;
  }).join(', '));
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title;
</head>
<body>
  <button onclick="test()">Generate List</button>
</body>
</html>

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

Unable to execute jQuery on dynamically loaded AJAX page

Currently, I am utilizing jQuery to dynamically load a page via AJAX using the $.ajax method (specifically test.html). This HTML document consists of several buttons with associated animations when clicked (also utilizing jQuery). The .click() properties a ...

phpjavascriptjqueryajaxclick

Two separate buttons in two distinct views that trigger the same function in AngularJS

I am currently working on a Single Page Application (SPA) that has two distinct views - one for subjects and another for students. In the subject view, there is a save button located in app/views/subject/subject.html: <button type="button" class="b ...

javascriptangularjs

Translating SQL to Sequelize Syntax

I have an SQL query that I need to rewrite as a sequelize.js query in node.js. SELECT historyTable1.* FROM table1 historyTable1 WHERE NOT EXISTS ( SELECT * FROM table1 historyTable2 WHERE historyTable2.id=historyTable1.id AND historyTable2.da ...

javascriptnode.jstypescriptsequelize.jssequelize-typescript

What is the best way to integrate Express JS with Google Charts?

I'm currently working on an Express application and I need to integrate Google charts into it. I found this helpful article here for guidance. Additionally, I would like to know how to replace manual data with data from a MySQL database. ...

javascriptmysqlnode.jsexpresshandlebars.js

JSON retrieval line

Hi there, this is my first time posting here so I hope my question is clear :-) I have a PHP page that retrieves JSON data from a remote website. This JSON includes a list of names, and for each name, I need to fetch additional details from another JSON p ...

phpmysqljsonajaxtwitter-bootstrap

fetching JSON information from PHP script in an Android mobile app

As a novice in android app development, I recently attempted to connect my application to a server to retrieve data from MySQL. My initial focus was on creating the login functionality, but encountered challenges with reading JSON data using my code. Here ...

javaphpandroidmysqljson

JavaScript: Creating an array of images from a directory

I've encountered a problem that has proven to be more complex than expected - I am struggling to find resources related to my specific question. My goal is to store 36 images from a folder on my computer into an array using Javascript. Below, you will ...

javascriptarraysimagepath

When the CONTENT_TYPE is set to application/json, Apache Camel automatically alters the JSON data

While developing my REST-API with Apache Camel, I've encountered an issue. I am using "bindingMode(RestBindingMode.json)" for my restConfiguration with jetty. In one of my Processors, I assign a JSON object to the "body" of the "out" object. When I sp ...

javajsonapache-camelcontent-type

Conceal a column within a nested HTML table

I am facing a challenge with a nested table column structure: My goal is to hide specific columns based on their index within the table. Can someone explain the concept behind achieving this? I am unsure of how to get started on this task. <table clas ...

javascriptjqueryhtml

Transforming a JSON array from one structure to another with the power of JavaScript

Hello everyone, I'm new to this platform and seeking some advice. Can anyone help me with converting a JSON array to another JSON array while grouping by ID and including only the values of 'ID' and 'SID'? I've attempted usin ...

javascriptarraysjsonlodashtransformation

Unable to locate the reverse for 'my_views_name' without any arguments in Django. Bridging server-side code with client-side JavaScript using jQuery

How can I create a button to update a URL after fetching data from the database using jQuery AJAX? This is my code in views.py: def list_maingroup(request): lists = MainGroup.objects.all().order_by('-pk') data = [] for i in lists: ...

javascriptpythondjangoajax

Transform an array list of strings into an array list of integers

I am working with a Model class called ModelWeeklyGuarantee and I need to convert a string ArrayList to an integer ArrayList For example, converting [5,7,9] from a string ArrayList to [5,7,8] in an IntegerArrayList at index 0. public static ArrayList< ...

androidarraysjsonlistviewandroid-recyclerview

What is the best way to create a partially scrolling image? Striking a balance between position:fixed and position:absolute

I need the background image to smoothly move up and down as the user scrolls, staying in a fixed position relative to the content. It's kind of like a combination of being fixed to the screen and absolutely positioned. Take a look at this example: N ...

javascripthtmlcssscroll

PHP: A guide on validating textboxes with jQuery AJAX

How can I use jQuery AJAX to validate a textbox on focusout? The validation process includes: Sending the value to a PHP page for server-side validation Displaying an alert message based on the validation result I have only impl ...

phpjavascriptjqueryajax

What is the reason behind not receiving any data from the POST request made to Nearbee?

I attempted to transmit data from my beacon to the Nearbee API via a POST request following their provided instructions in the guide Make beacon detected by Nearbee, but I did not receive any response from the API upon clicking the send button. . Could th ...

jsonpostpostmanbeacon

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

Best method to incorporate JSON array from WebService into a Dataframe

I have a column titled 'code' that I need to send to a web service in order to update two specific fields (dfMRD1['Cache_Ticker'] and dfMRD1['Cache_Product']) with data retrieved from the JSON response, specifically the values ...

pythonarraysjsonpandas

Having trouble locating the web element within a div popup while utilizing Node.js and WebdriverIO

I need assistance with a seemingly simple task. I am currently learning webdriverjs and attempted to write a short code to register for an account on the FitBit website at URL: www.fitbit.com/signup. After entering my email and password, a popup appears as ...

javascriptnode.jsseleniumselenium-webdriver

PHP - Organizing JSON Data Structures

I have received JSON data from my table structured as follows. The first value represents dates, while the second value corresponds to 11_OIC. [ [ 984639600, "23.49166667" ], [ 1521097200, "22.985" ], [ ...

phpjson

Analyzing a Text file in VB.NET following a particular keyword

Currently, I am working on a Module Application that has the capability to read a text file and identify lines containing specific words. For example, the input data I am working with appears like this: Dealer Number: 90402001 Dealer Name: SAN TAN FORD ...

vb.netparsingtext.net