1

I have received a response from API which is JSON array. I want to convert it into corresponding JSON Object so that Material Table recognizes it. The Response from API - enter image description here

But it doesn't get a display in the table. When I manually create the Array object like below then the table is populated- let ELEMENT_DATA = [ {"policyID":"119736","state":"Rajasthan","dummy":"no"}, {policyID:"119736",state:"Las Vegas",country:"USA"} ]; console.log(ELEMENT_DATA);

enter image description here

TABLE is DYNAMIC. I cannot create a predefined class for it.

Improve this question
5
  • Can you use JSON.Parse for this ? Commented May 25, 2019 at 2:54
  • It gives error for JSON.parse Commented May 25, 2019 at 2:56
  • What kind of error ? Commented May 25, 2019 at 2:56
  • ERROR SyntaxError: Unexpected token s in JSON at position 1 Commented May 25, 2019 at 2:57
  • Provide an API response in the form of code not images Commented May 25, 2019 at 4:07

3 Answers 3

Reset to default
3

UPDATE

function toJSON(input) {
  var UNESCAPE_MAP = {
    '\\"': '"',
    "\\`": "`",
    "\\'": "'"
  };
  var ML_ESCAPE_MAP = {
    '\n': '\\n',
    "\r": '\\r',
    "\t": '\\t',
    '"': '\\"'
  };

  function unescapeQuotes(r) {
    return UNESCAPE_MAP[r] || r;
  }

  return input.replace(/`(?:\\.|[^`])*`|'(?:\\.|[^'])*'|"(?:\\.|[^"])*"|\/\*[^]*?\*\/|\/\/.*\n?/g, // pass 1: remove comments
      function(s) {
        if (s.charAt(0) == '/')
          return '';
        else
          return s;
      })
    .replace(/(?:true|false|null)(?=[^\w_$]|$)|([a-zA-Z_$][\w_$]*)|`((?:\\.|[^`])*)`|'((?:\\.|[^'])*)'|"(?:\\.|[^"])*"|(,)(?=\s*[}\]])/g, // pass 2: requote
      function(s, identifier, multilineQuote, singleQuote, lonelyComma) {
        if (lonelyComma)
          return '';
        else if (identifier != null)
          return '"' + identifier + '"';
        else if (multilineQuote != null)
          return '"' + multilineQuote.replace(/\\./g, unescapeQuotes).replace(/[\n\r\t"]/g, function(r) {
            return ML_ESCAPE_MAP[r];
          }) + '"';
        else if (singleQuote != null)
          return '"' + singleQuote.replace(/\\./g, unescapeQuotes).replace(/"/g, '\\"') + '"';
        else
          return s;
      });
}

let array = [
  "{state:Haryanaa, country:India}",
  "{state:Goaa, country:India}"
];

let newarray = array.map(item => {
item = toJSON(item.replace(/"/g,"'"));
  return JSON.parse(item);
});


console.log(newarray);

You can do it using JSON.parse

   let newArray = Object.keys(myArray).map(item=>{
      return JSON.parse(myArray[item]);
    })

alternative if your are using php on server side you can use json_decode before encoding it to json

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

ERROR - core.js:1673 ERROR SyntaxError: Unexpected token s in JSON at position 1
Thanks for the effort - But i am not able to understand why JSON.parse() is failing for {state:Haryana,country:India} . There should be a simple way that I am missing
Your json is unquoted JSON and JSON.parse not excepts it
Absolutely correct and your solution works! But how to quote it is now what I have to check. I am using GSON lib from Google in Java. If i make it quoted it should work!!!!
2

Have you tried storing the data as an array directly?

ELEMENT_DATA: any = [];
this._endpoint.getData().subscribe(res => this.ELEMENT_DATA = res);

If that is the result of the data it actually is a correct JSON data element so it should work with this using this in your HTML structure.

*ngFor="let data of ELEMENT_DATA"

The error seems to be on the server side, the unquoted string on your result is a bad JSON string from the service, are you using a string generator to return the JSON? Check the server side of the application.

Improve this answer

4 Comments

did you made the server side of the application? If so, can you share the method or part where you generate the JSON?
I have corrected it on server side and it gives me back the array of JSON. Now i map every element and do the JSON.parse on every element..Now i need to figure a way to return Array of JSON objects so that no need to parse on client side..
well if you have corrected the server side it should return a correct JSON array with the quotes for you just to use a *ngFor in your frontend app
The thing is it gives me correct quoted JSON array and not an array of JSON objects. Let me work around all the possible ways so that there is minimal code on client side..
0

you can do like this, it writes to console as of now,

function convert() {
    var data = [
      "{policyID:119736,state:Rajasthan}",
      "{policyID:149737,state:Haryana}"
    ];

    var converted = data.map(d => {
         var str = d.replace(/([a-zA-Z0-9-]+):([a-zA-Z0-9-]+)/g, "\"$1\":\"$2\"");
     return JSON.parse(str);
    });

    console.log(converted);
   }
Improve this answer

2 Comments

If he has created the server side of the application, doing this is the worst possible solution as it clutters the clean code with something that should not happen in the first place.
The question asked was how to format the json in client side, depends if we can correct on server side if you have code with you else

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.