obtaining specific information from JSON data

In my JavaScript code, I am retrieving data from an ajax call:

$.ajax({
    type: "GET",
    url: URL,

    headers: {
                'Access-Control-Allow-Origin': '*'
            },
    async: false,
    dataType: "text",
    success: function (data) {
        result = data;
}

The response we are receiving is structured like this:

{
    "type": "FeatureCollection",
    "totalFeatures": 3,
    "features": [{
        ...
    }, {
        ...
    }, {
        ...
    }],
    "crs": {
        ...
    },
    "bbox": [...]
}

My goal here is to extract the values of "type" from the data.

"type":"https://xxxxxx/cl/SiteType/perimeterZone"
"type":"https://xxxxxx/cl/xxxxx/constructionZone"

Is there a way to achieve this without relying on Regex?

Just for your information, we are utilizing OpenLayers3.

javascriptjsonregexajaxopenlayers-3

Answer №1

let propertyTypes = data.features.map(feature => feature.properties.type);

Answer №2

There is a solution:

  • Extract the information from the output.
  • Select and retrieve only the desired data.

let parsedData = JSON.parse(output);

(parsedData.objects).forEach(function(object) {
  console.log(object.details.name);
});

Answer №3

var info={
    "category": "FeatureCollection",
    "totalItems ": 3,
    "items": [{
        "category": "Feature",
        "idNum": "Site_view.5b59c3a5-bc04-4707-93e7",
        "geometryInfo": {
            "shapeType": "MultiPolygon",
            "pointList": [
                [
                    [174877.4813, 130159.3695],
                    [174991.5857, 130162.2884],
                    [175085.7881, 130172.9028],
                    [175204.6689, 130195.7236],
                    [175205.9957, 130192.274],
                    [175084.4613, 130170.7799],
                    [174989.7282, 130158.8387],
                    [174877.4813, 130159.3695]
                ]
            ],
             [
                [175130.0918, 130397.2857],
                [175152.5814, 130316.5877],
                [174960.7581, 130303.3585],
                [175130.0918, 130397.2857]
            ]
        },
        "geometryName": "geometry",
        "dataDetails": {
            "ID": 24636,
            "title": "test CA 24 05-10-2017",
            "organization": "xxxx-xxxx-xxx",
            "parentID": null,
            "ref": null,
            "startDate": null,
            "endDate": null,
            "Expr1": "xxxx-xxxx-xxxx-xxxx",
            "createdOn": "2018-06-05T11:26:41.673Z",
            "modifiedOn": "2018-09-20T12:37:30.257Z",
            "siteIdentifier": "f3f0fe94-eec7-4ff0-8a12-5c6dfc67b38f",
            "type": "https://xxxxxx/cl/xxxxx/constructionZone",
            "validUntil": null,
            "Expr3": "2018-06-05T11:26:41.673Z",
            "baseName": "ZZZ_Powalco_Test",
            "parentName": null,
            "status": "Inscription",
            "powalcoID": "18007495",
            "boundingBox": [174877.4813, 130158.8387, 175205.9957, 130397.2857]
        }
    }, {
        "category": "Feature",
        "idNum": "Site_view.9e7bf413-ae67-4a40-9825-3c69ad4bdbfc",
        "geometryInfo": null,
        "geometryName": "geometry",
        "dataDetails": {
            "ID": 24638,
            "title": "test CA 24 05-10-2017",
            "organization": "xxxxxxxxx",
            "parentID": null,
            "ref": null,
            "startDate": null,
            "endDate": null,
            "Expr1": "f3f0fe94-eec7-4ff0-8a12-5c6dfc67b38f",
            "createdOn": "2018-06-05T11:26:45.116Z",
            "modifiedOn": "2018-06-05T11:26:45.116Z",
            "siteIdentifier": "f3f0fe94-eec7-4ff0-8a12-5c6dfc67b38f",
            "type": "https://xxx/xx/SiteType/ZCCC",
            "validUntil": null,
            "Expr3": null,
            "baseName": "ZZZ_Powalco_Test",
            "parentName": null,
            "status": "Inscription",
            "powalcoID": "xxx"
        }
    }, {
        "category": "Feature",
        "idNum": "Site_view.xxxxxx",
        "geometryInfo": {
            "shapeType": "MultiPolygon",
            "pointList": 
                [
                    [174865.8055, 130168.1263],
                    [175247.3917, 130213.768],
                    [175250.8413, 130192.5393],
                    [175109.405, 130153.7969],
                    [174866.867, 130142.9172],
                    [174865.8055, 130168.1263]
                ]
            ],
              [
                [174960.7581, 130303.3585],
                [175130.0918, 130397.2857],
                [175152.5814, 130316.5877],
                [174960.7581, 130303.3585]
            ]
        },
        "geometryName": "geometry",
        "dataDetails": {
            "ID": 24637,
            "title": "test CA 24 05-10-2017",
            "organization": "3dd8aedd-cb82-4fa4-b932-2046ea7b7251",
            "parentID": null,
            "ref": null,
            "startDate": null,
            "endDate": null,
            "Expr1": "f3f0fe94-eec7-4ff0-8a12-5c6dfc67b38f",
            "createdOn": "2018-06-05T11:26:41.674Z",
            "modifiedOn": "2018-09-20T12:37:30.257Z",
            "site Identifier": "f3f0fe94-eec7-4ff0-8a12-5c6dfc67b38f",
            "type": "https://xxxxxx/cl/SiteType/perimeterZone",
            "validUntil": null,
            "Expr3": "2018-06-05T11:26:41.674Z",
            "base Name": "ZZZ_Powalco_Test",
            "parent Name": null,
            "status": "Inscription",
            "powalcoID": "18007495",
            "bounding Box": [174865.8055, 130142.9172, 175250.8413, 130397.2857]
        }
    }],
    "crsRefSystem": {
        "descrption": "name",
        "details": {
            "nameData": "urn:ogc:def:crs:EPSG::31370"
        }
    },
    "bboxBounds": [174865.8055, 130142.9172, 175250.8413, 130397.2857]
};
info.items.map(item => {
  console.log("Category : "+item.dataDetails.type);
});

Just run through your information utilizing the map function.

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

Generate interactive HTML content and showcase JSON data within it

I am working on an AJAX API call that returns JSON format data. My goal is to display each value on the screen using HTML elements. Although I have achieved this, the design is not dynamic as needed. Additionally, I want to show a message ("No data avail ...

jqueryhtmlcssjsonajax

What is causing the backslash character to be removed from my ajax request?

When using Ajax to call a rest endpoint, the request takes two parameters: user and permission. $.ajax({ type: 'GET', cache: false, url: "/app/Rest/4.0/UserManagement/AddPermissionToUser", data: { username: encodeURI(user ...

javascriptjqueryajaxrestrazor-2

Issue with multiple dropdown menus not closing when clicked on

The current implementation provides the functionality to convert select boxes into list items for styling purposes. However, a drawback of the current setup is that once a dropdown is opened, it can only be closed by clicking on the document or another dr ...

javascriptjqueryhtmlcss

Are there any specific plugins or recommended methods for Gatsby to generate each build in a different language?

If I have a website built in Gatsby with English content on www.someWebsiteUrl.com, how can I create the same page with Spanish content on www.someWebsiteUrl.es? Is there a way to specify which site with specific translations should be generated? For exam ...

javascriptreactjsgatsby

What is the importance of context in the subscription method of RxJS or Angular Observables?

In the given situations, I am providing a child Component with a property that is updated later through an RxJs Observable subscription. Angular fails to detect changes when not using an anonymous function or binding the this context. // Situation 1 // C ...

javascriptangularrxjs

The issue with OBJLoader and MTLLoader in ThreeJS is that they are failing to display png textures properly

After importing the 3D model which includes .obj, .mtl, and several jpeg and png files, I attempted to load the model using /images like this: However, all I am seeing is a black model like this: I'm puzzled about what I might have overlooked since ...

javascriptthree.jsobjloader

Enhance User Experience: Revise Custom Fields Post Checkout Validation Error in WooCommerce

For my current project, I am making some customizations to the WooCommerce features. Specifically, I have set up two "shipping methods": 1. delivery 2. take away In addition, I have included a custom field on the checkout page which is a <select& ...

phpjqueryajaxwordpresswoocommerce

Having trouble with my Javascript code - my HTML page is refusing to load and the innerHTML

Below is my code in the HTML file. I have implemented a flatpickr date picker to allow users to select a date. On closing the calendar, I intend to update the current document by adding some HTML content. However, this functionality does not seem to be wor ...

javascripthtml

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

javascripthtmlreactjsmaterial-uiweb-component

The class .is-invalid transforms into .is-valid when rendered

Currently, I am incorporating bootstrap into my react project. In this case, I have a variable called mobile that needs to undergo validation whenever there is a change in the input field. Below is the code snippet for the component: const EnterMobile = ( ...

javascriptreactjsbootstrap-4

Unable to change the main data of slot object in VueJS

When running this demo and selecting "modify in child", the text will be updated. However, if you choose "modify top level through slot", the text remains unchanged, and attempting to click the other button afterwards will not work. Is there a way to upda ...

javascriptvue.jsvuejs2

Troubleshooting Bootstrap: Navigation bar toggling causes JS functions to malfunction

My JS function is no longer working when the responsive website's breakpoint of 768px is activated (specifically, the nav var toggle/collapse). This is causing the problem where the JS function stops working. The HTML code in question is: <div cl ...

javascriptjquerytwitter-bootstrapnavbar

Using Puppeteer to extract data produced by JavaScript

Struggling to extract a dynamically generated value using JavaScript? I've been attempting this for some time with no success. The login aspect of the page is working fine. The main focus now is on retrieving the SoC% value from the page and nothing ...

javascriptnode.jsweb-scrapingpuppeteer

Guide on setting up JSME, a chemistry portal integrated with JavaScript, within vuejs

I am looking to integrate the JSME chemistry portal into my Vuejs application. Upon the initial page load, an error is displayed: JSME initialization error: HTML id jsme_container not found. Strangely, upon refreshing the page, the error disappears. How ...

javascriptjqueryvue.jsfrontend

There seems to be an issue with the ajax functionality as I am not receiving any

I'm struggling with inserting a name into my database. I have a form that asks for the name and a submit button. However, when I click the submit button, no alert is shown. I am new to using ajax. This code is from index.php. <html> <he ...

phpajax

PHP throws a invalid argument error when attempting to decode a JSON file

Currently, I am attempting to parse a JSON file using PHP with the following code snippet. <?php $content = file_get_contents('result.json'); $contendecoded = json_decode($content); print_r($contendecoded); foreach ($contendecoded ...

phpjson

Height setting for an ASP.NET UpdateProgress widget

In my ASP.NET Project, I am facing an issue with the UpdateProgress. I need the UpdateProgress to adjust its height dynamically based on the content within the UpdatePanel. I attempted to use a JQuery script to accomplish this, but the script does not run ...

javascriptjqueryasp.nethtml

Storing and Manipulating a JavaScript Object with Vuex: A New Perspective

Consider a hypothetical JavaScript object class like this: class Car { var engineTurnedOn = false; ... public turnEngineOn() { engineTurnedOn = true } } If I want to turn the engine on, should I create an action called 'turnEngineOn&ap ...

javascriptvue.jsvuex

Tips for eliminating the backslash introduced by JQuery

Switching back from framework 4.5 to 4.0 caused several issues that needed fixing. One significant change I noticed was that jQuery started escaping double quotes. Is there a way to stop this behavior? I attempted datatest = datatest.replace("\\ ...

javascriptjqueryjsonvisual-studio-2012

Is it possible to include a div above a centered image?

Currently I am working with ImageFlow and I would like to overlay a div on top of the image when it is clicked, sliding it into the center. I have been looking through the JavaScript file but the function MoveIT() seems to be called multiple times and I am ...

javascriptjqueryhtmlcssimageflow