retrieve entries that share identical strings in a JSON

I am in need of extracting the values of entries that share a common string. My goal is to locate campus0, then iterate through each one to retrieve the text and link for link0. This process needs to be repeated for every occurrence of campus and link.

Unfortunately, I cannot convert my JSON data into a multidimensional array as it is being sourced from another website.

The framework I am working with is AngularJS.

Below is an example of the JSON structure:


"campus_0_name": [
    "Petone"
],
"campus_0_link_0_text": [
    "Bachelor of Engineering Technology Degree (Level 7)"
],
"campus_0_link_0_url": [
    "https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/BachelorofEngineeringTechnology/tabid/695/Default.aspx"
],

<!-- Additional JSON data for campus_0 omitted for brevity -->

"campus_1_link_0_text": [
    "Bachelor of Engineering Technology Degree (Level 7) "
],
"campus_1_link_0_url": [
    "https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/BachelorofEngineeringTechnology/tabid/695/Default.aspx"
],

<!-- Additional JSON data for campus_1 omitted for brevity -->

This is the desired output I want to achieve:


<div class="campus_0">
    <dl class="link_0">
        <dt class="text">Bachelor of Engineering Technology Degree (Level 7)</dt>
        <dd class="url">"https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/BachelorofEngineeringTechnology/tabid/695/Default.aspx"</dd>
    </dl>

    <!-- Additional details for links within campus_0 omitted for brevity -->
</div>

<div class="campus_1">
    <dl class="link_0">
        <dt class="text">Bachelor of Engineering Technology Degree (Level 7)</dt>
        <dd class="url">"https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/BachelorofEngineeringTechnology/tabid/695/Default.aspx"</dd>
    </dl>

    <!-- Additional details for links within campus_1 omitted for brevity -->
</div>
javascriptjsonangularjs

Answer №1

It can be challenging to work with the provided data in its current format, but one approach is to convert it into a more user-friendly format upon receiving it from the server.

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  var data = {
    "campus_0_name": [
      "Petone"
    ],
    "campus_0_link_0_text": [
      "Bachelor of Engineering Technology Degree (Level 7) "
    ],
    "campus_0_link_0_url": [
      "https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/BachelorofEngineeringTechnology/tabid/695/Default.aspx"
    ],
    "campus_0_link_1_text": [
      "New Zealand Diploma in Engineering (Level 6) "
    ],
    "campus_0_link_1_url": [
      "https://www.weltec.ac.nz/SUBJECTAREAS/Engineering/NewZealandDiplomainEngineeringLevel6Y1/tabid/1002/Default.aspx"
    ],
    "campus_0_link_2_text": [
      "Certificate in Foundation Studies (Level 3 and 4) - Engineering"
    ],
    "campus_0_link_2_url": [
      "https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/CertificateinFoundationStudiesEngineering/tabid/1253/Default.aspx"
    ],

    "campus_1_link_0_text": [
      "Bachelor of Engineering Technology Degree (Level 7) "
    ],
    "campus_1_link_0_url": [
      "https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/BachelorofEngineeringTechnology/tabid/695/Default.aspx"
    ],
    "campus_1_link_1_text": [
      "New Zealand Diploma in Engineering (Level 6) "
    ],
    "campus_1_link_1_url": [
      "https://www.weltec.ac.nz/SUBJECTAREAS/Engineering/NewZealandDiplomainEngineeringLevel6Y1/tabid/1002/Default.aspx"
    ],
    "campus_1_link_2_text": [
      "Certificate in Foundation Studies (Level 3 and 4) - Engineering"
    ],
    "campus_1_link_2_url": [
      "https://www.weltec.ac.nz/SUBJECTAREAS/EngineeringTechnology/CertificateinFoundationStudiesEngineering/tabid/1253/Default.aspx"
    ]
  };

  var list = [];
  angular.forEach(data, function(value, key) {
    var match = key.match(/campus_(\d+)_link_(\d+)_(\w+)/);
    if (match) {
      var sublist = list[match[1]] || (list[match[1]] = []);
      var obj = sublist[match[2]] || (sublist[match[2]] = {});
      obj[match[3]] = value;
    }
  });

  $scope.list = list;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <div ng-repeat="array in list track by $index" class="campus_{{$index}}">
    <dl ng-repeat="obj in array track by $index" class="link_{{$index}}">
      <dt class="text">{{obj.text}}</dt>
      <dd class="url">"{{obj.url}}"</dd>
    </dl>
  </div>
</div>

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

Challenge with the Table Filtering feature in a React application

Having an issue with the filtering functionality in React and MUI. The problem arises when adding a row first and then attempting to filter - the filter stops working. However, if I filter immediately without adding a row, it works as expected. To reprodu ...

javascriptreactjsecmascript-6material-ui

What is the proper approach for returning JSON in a Rails GET request?

As an illustration when making a request GET --> http:://{url}?search={username} I must provide: [ {id: 1, name: 'sande', nickname: 'username'}, {id: 2, name: 'sande2', nickname: 'username'} ] This is how ...

ruby-on-railsjson

Suddenly, the Bootstrap CSS appears to have ceased functioning

Here are some of the questions I've already checked out: Bootstrap JavaScript not functioning Twitter Bootstrap dropdown suddenly not operational Comprehensive list of possible issues causing a CSS file to fail All of a sudden, my Bootstrap sty ...

javascriptcssasp.net-mvctwitter-bootstraptwitter-bootstrap-4

What could be the reason for my component not getting the asynchronous data?

Currently, I am delving into the intricacies of React and have been following a tutorial that covers creating components, passing props, setting state, and querying an API using useEffect(). Feeling confident in my understanding up to this point, I decided ...

javascriptreactjsasynchronousreact-hooks

Working with a data variable in a jQuery AJAX operation

I've been attempting to utilize the following code, but it's not functioning as expected: UPDATED WORKING: $(document).ready(function() { $('.infor').click(function () { var datasend = $(this).html(); $.ajax({ ...

javascriptajaxhttp-post

Obtain the scope within a directive

Hello everyone. I am just starting to explore AngularJS and I must say, it's quite fascinating. However, I'm a little confused about the current situation. app.controller("myCtrl", ['$scope', '$http', '$filter', fu ...

angularjsangularjs-directive

utilizing a message collector for configuring embed fields

I'm currently working on a message collector feature that collects data to use in an embed's title, description, and color. My goal is to have each value correspond to a different aspect of the embed. However, I've encountered some challenge ...

javascriptnode.jsdiscorddiscord.js

Exploring the dynamic changes in user authentication state with Angular Fire subscriptions

At the moment, I have been listening to authentication state changes in my ngOnInit method of my AppComponent: export class AppComponent implements OnInit { constructor(public fireAuth: AngularFireAuth) { } ngOnInit(): void { this.fireAuth.auth ...

javascriptangularfirebase-authenticationangularfire2angular11

Tips for refreshing a list in Angular using a service after form submission

As a beginner with Angular, I am setting up a simple "submit comment" and "display list of comments" page. My goal is to automatically update the list of comments after submitting a new one, without having to manually refresh the page. Here are my control ...

javascriptformsangularjsfrontend

Parsing a file in Ruby without needing to escape special characters

Contents of the File: file.txt: { 'a' : 'b"c\g' } I am in need to parse this JSON content. read_file = File.read(file.txt) The string read_file appears as: "{ 'a' : 'b\"c\\g'}&bso ...

jsonrubystringparsinghash

Formatting JSON with the directory path using C#

I'm struggling to store a folder path in a json file and I just can't seem to get it right Here is the code I am using to write to the json file: string location = System.Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); string u ...

c#json

Starting on the Legacy 1.2.0.RC4 TideSDK: Where to Begin?

I just acquired the legacy version 1.2.0.RC4 from the official website. Now that I have it downloaded, what are the next steps? How can I begin using it? ...

javascripthtmlcssdesktop-applicationtidesdk

Creating bespoke form components with AngularJS

I am looking to develop a unique form element that functions in the same way as traditional form elements in terms of validation and value, but with an object as its value. For instance, I want to create a "birthday element" that, when clicked, displays a ...

javascriptangularjsangularjs-directive

What could be causing my external JavaScript file to not function properly upon loading my HTML file?

I have organized my code by separating the HTML and JavaScript portions. The JavaScript code is now in its own separate file and I use 'script' tags to reference it in the HTML file. Within the JavaScript code, I have two functions - one creates ...

javascripthtmlnode.js

I have the capability to capture HTTPS requests with Jmeter, however encountering difficulties when trying to input the data

When using Jmeter's proxy settings to record HTTPS requests and enabling the "Use this Proxy for all protocols," I encounter an issue. After logging into the application and entering a value in the search field, upon clicking on search, the system ret ...

jsonjmeter

Is there a way to implement Twitter Bootstrap Dropdowns with the first item acting as a toggle button?

Have you seen the Twitter Bootstrap Dropdowns Docs? They provide the syntax for creating a dropdown menu like this: <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul cla ...

javascriptjqueryhtmltwitter-bootstrapdrop-down-menu

Manipulating the DOM with AngularJS directives is not functioning as expected

I am facing an issue with integrating a code that needs to scroll slowly on the page using AngularJS 1.4. When I try to include this code in a directive using the link function(scope, element, attrs), it doesn't work properly. Interestingly, the code ...

jqueryangularjsangular-directive

``Change the color of the sections in a 3D pie chart on a Highcharts

I am looking to create a custom pie chart with two different colors: one for the main surface and another for the sides. Currently, I can only configure the lighter blue color for the main surface, but I would like to also change the darker blue color for ...

javascriptcsshighcharts

Guide to Implementing i18n-iso-countries Library in React

I am currently developing a React application and attempting to utilize the i18n-iso-countries package to retrieve a countries object in English where keys represent iso codes and values represent country names. This process is straightforward in Node.js, ...

javascriptnode.jsreactjsnpm

What is the best way to structure JavaScript files in Rails 3?

I am currently developing a web application in Rails 3 and have opted to use JQuery as my primary Javascript framework. While my application doesn't have an extensive amount of Javascript at the moment, I am starting to incorporate transitions between ...

javascriptjqueryruby-on-railsruby-on-rails-3unobtrusive-javascript