How to Handle Non-Conventional JSON Parsing in AngularJS

When retrieving a JSON response from a Restful service, the format may not always be accepted by Angular. For example: 

{
   "comments":{
      "columns":[
         "clientId",
         "treatmentDate",
         "comments",
         "photo",
         "practitioner"
      ],
      "records":[
         [
            "1",
            "2016-09-12",
            "Some Coments",
            "0",
            "Doc 4"
         ],
         [
            "1",
            "2016-09-11",
            "DDD oNE",
            "1",
            "Docc 3"
         ]
      ]
   }
}

In order to make it work with Angular, you can reformat the data into a standard structure like this:

[
   {
      "clientId":"1",
      "treatmentDate":"2016-09-12",
      "comments":"Some Coments",
      "photo":"0",
      "practitioner":"Doc 4"
   },
   {
      "clientId":"1",
      "treatmentDate":"2016-09-11",
      "comments":"DDD oNE",
      "photo":"1",
      "practitioner":"Docc 3"
   }
]

If you need help converting the data automatically or if you should create a custom function, consider looking into directives for assistance.

javascriptangularjsjson

Answer №1

Have you considered manually restructuring the data to match the desired format?

const newData = json.comments.records.map(function(record) {
    return json.comments.columns.reduce(function(reshaped, columnName, idx) {
        reshaped[columnName] = record[idx];
        return reshaped;
    }, {});
});

It is important to note that this method assumes that the length of each array in records will always be equal to the number of column names.

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

Only perform the Rails ajax call once initially

I'm currently working on creating a drop down menu that contains a substantial amount of content, and I would like to use an ajax get call to load everything upon mouse enter. Here is my code written in coffeescript: class @SecondaryMenu construct ...

javascriptjqueryruby-on-railsajaxcoffeescript

What are all the functionalities provided by jquery select?

Currently, I am venturing into testing out a new jQuery plugin. let myPlugin = new MyPlugin(); $(#myPlugin).someFunction(); console.log($(myPlugin)) I'm curious - is there a way for me to see a full list of the available functions/methods for me to ...

javascriptjquery

Align the number of an Unordered List to the left

Exploring UN-ordered lists in HTML has led me to wonder if it's possible for dynamically generated ul tags to display like this: * Hello * Hi * Bi * Name * Ron * Mat * Cloth * Color * Red When I ...

javascriptjqueryhtmlcsshtml-lists

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

It appears that the onkeyup event is not triggered in IE8/IE9 (uncertain about 10) when the enter button is pressed in an input box, if a button element is present on the page. <html> <head> <script> function onku(id, e) { var keyC = ...

javascripthtmlinternet-explorer

In React, when a user clicks the back button on the browser window, ensure you pass props back to the originating component

While moving from component A to component B through routing, I want to send a prop back to A when the user clicks on the browser's back button while on B. Can this be achieved? I am currently using React's history.push for navigating between com ...

javascriptreactjsroutesurl-routingreact-props

The Bootstrap Navbar is causing the navigation bar to span across two lines

I'm having an issue with my navbar taking up two lines on desktop resolution, but fitting perfectly on mobile. I've spent hours going through the code with no success. Any help would be greatly appreciated. The HTML code is provided below. <! ...

javascriptjqueryhtmlcsstwitter-bootstrap

Find the variance between today's date and a selected date, then initiate the timer based on this variance

I have a grid containing data. I utilize the loadGrid() function to preload data or conditions before the grid finishes loading. When the active state is set to 1, my intention is to initiate a timer by calculating the difference between the current date ...

javascriptangulartypescript

Utilizing phonegap/jQueryMobile to extract OpenCart products in JSON format is a simple process

Looking to retrieve the product catalog in JSON format from my OpenCart store through a phonegap mobile application using Ajax, JavaScript/jQuery. Is this something that can be done with OpenCart? Any suggestions, ideas, or sample code would be greatly ap ...

jqueryajaxjsonjquery-mobileopencart

Utilize an asynchronous method to upload files to Google Cloud Storage in a loop

I am new to using Javascript and have been working on a loop to upload images to Google Cloud Storage. While the image uploads correctly with this code, I'm facing an issue where the path (URL) is not being saved in the database AFTER the upload. I a ...

javascriptnode.jsgoogle-cloud-platformgoogle-cloud-storagenodejs-stream

How can we arrange a two-dimensional array in descending order of string length using the first string in the sub-array as the basis for

If I have an array with elements like these: var array = [["This should be last", 1], ["This should be first I think", 1], ["This is the middle one", 1]]; The second value in each sub-array, which is always 1 in this case, doesn ...

javascriptarrays

Exploring content in Embed message fields

Can anyone help me with logging the contents of an embed received from a specific bot? I've tried some basic things but seem to be missing something. Please review my code and let me know what I'm doing wrong and how I can improve it. Thank you i ...

javascriptnode.jscollectionsdiscord.js

Responsive menu is failing to respond to the click event

I'm facing an issue with my responsive menu on mobile phones. It should display two buttons - one for the navigation bar and the other to toggle the side bar by removing the classes hidden-xs and hidden-sm. However, I am having trouble getting the btn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

javascriptjquerycss

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

javascriptjqueryhtml

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

javascriptnode.jsapiexpressasynchronous

Store the information retrieved from an Ajax call regarding an artist on the page, ensuring that it is only saved once for that

I have been working on a single-page application that utilizes the Spotify REST API and JQuery to enable users to search for an artist and display their information on the page. However, I want to ensure that the app saves details about each artist only ...

javascriptjqueryajaxapispotify

Utilizing AJAX to fetch and retrieve a JSON array

Check out the javascript code below: var formSerializedData = $('form#registration-form').serialize(); $.post( '<?php echo $this->url('/register', 'do_register')?>', function(response) { alert(response); } ...

javascriptphpajaxjsonconcrete5

Chrome App Experiencing Issues with DOM Loading

I am working on converting a simple HTML5 Snake game that utilizes canvas into a Chrome App. Below is the snippet of my original HTML file: <!DOCTYPE html> <html> <head> <title>Snake</title> <link rel=" ...

javascriptgoogle-chromecanvasgoogle-chrome-devtoolsgoogle-chrome-app

'Error: Object does not have access to the specified property or method 'values'

I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...

javascripthtml

Custom error validation for JSON data

I am looking to enhance the validation of JSON fields against a case class by incorporating custom error messages. Specifically, I want to be able to display an error message if the name, email, or address is null, or if an Integer is provided instead of a ...

jsonscalaplayframework