Problem in converting into Js Object

[mizanmahi]

How can I convert these data into js object by retrieving from an ajax request

XG = [{
        id: "0d548577-28e4-5f77-b925-6074da6986d0",
        name: "Lizzie Park",
        hash: "681aba0a4bb59e15ba2bd7830856bd9e",
        number: "(536) 499-4520",
        email: "tecihum@vap.tv",
        address: !1
    }, {
        id: "c47e28f2-e971-5144-a340-b9ea777b33f5",
        name: "Lucinda Wade",
        hash: "8f1da5db5956c5b7eed5839c6b525964",
        number: "(609) 621-6729",
        email: !1,
        address: "407 Pavaji Square"
    }, {
        id: "c360ec4e-94e2-54f5-b23b-b9270cc60449",
        name: "Evan Patterson",
        hash: "36a7d5f6e075efb0a8812bfabcddc89e",
        number: "(417) 575-8385",
        email: "riow@esubi.hr",
        address: "1988 Azmu River"
    }];

[caleb-mabry]

@mizanmahi

How can I convert these data into js object by retrieving from an ajax request

You currently have an Array [] of Objects {}, if you were to just iterate through the array, you would gain access to each Object within that Array.

Hope this helps!

[chuckadams]

@mizanmahi

address: !1

That part is pretty weird. It’ll turn into false, but was it intended to mean something else? What is it that generated this request in the first place? (The usual convention for “data not present” BTW is null, not false)

[mizanmahi]

But I am getting string

[ilenia]

show your code, show how you are getting a string

[mizanmahi]

This is how i am getting the string

[ilenia]

can you post your code instead of a screenshot?

[mizanmahi]

Here is the source code,

const url = "https://gist.githubusercontent.com/entrptaher/0d0229296e72aa8b42081729de2e2509/raw/e58cffe0060679198e608b9282ad8554bdda4d8f/sample-data.js";

let userTitles = document.querySelectorAll(".heading__title");


let btn1 = document.getElementById("btn1");
btn1.addEventListener('click', function(e){
    let xhr = new XMLHttpRequest();
    xhr.onload = function(){
        if(this.status == 200){
           let data = this.response;
          console.log(typeof(data));
        }
    }
    xhr.open("GET", url, true);
    xhr.send();
})

[DanCouper]

Right, you can’t really do this

It would involve either writing the file as a JS file to the document, or carefully parsing the blob of text, replacing the JS code and turning it into valid JSON, then running JSON.parse on the resultant string (latter is what I tried to do when checking what you were trying to do).

It isn’t executable JS, it’s just a text file. You can’t fetch random text files then execute them, that’s not something that’s a great idea security-wise.

If it was JSON data, this would be no problem, because you then just run JSON.parse and get the data as an object. But it is not.

The code I’m using to check this:

async function f() {
  const res = await fetch("https://api.github.com/gists/0d0229296e72aa8b42081729de2e2509");
  const data = await res.json();
  // We're fine at this point, when I do
  // this I get the file contents:
  console.log(data.files["sample-data.js"].content);
  // BUT IT IS JUST TEXT

  try {
    let fileText = data.files["sample-data.js"].content;
    // NOW TRYING TO MAKE IT INTO
    // SOMETHING THAT WILL GO INTO
    // THE JSON PARSE FUNCTION
    // WITHOUT EXPLODING 
    fileText = fileText.replace(/XG = /, "");
    fileText = fileText.replace(/id: /gm, "\"id\": ");
    fileText = fileText.replace(/name: /gm, "\"name\": ");
    fileText = fileText.replace(/hash: /gm, "\"hash\": ");
    fileText = fileText.replace(/number: /gm, "\"number\": ");
    fileText = fileText.replace(/email: /gm, "\"email\": ");
    fileText = fileText.replace(/address: /gm, "\"address\": ");
    fileText = fileText.replace(/;/gm, "");
    // I gave up at this point as I have
    // better things to do, but this fails:
    return JSON.parse(fileText);
  } catch (err) {
    console.error(err)
  }
}

Just fork the gist and convert it to JSON, then you can actually get JSON and parse it. Converting arbitrary text (and yes, even though this text has the title sample-data.js it’s still just arbitrary text, it’s no use for transferring over a network) to JS is not a good idea

[DanCouper]

Ah, I didn’t think to just get the file directly in the document, was too hung up on getting it via AJAX

[caleb-mabry]

@DanCouper

hung up on getting it via AJAX

Would switching from AJAX to fetch cause problems within a program or lose browser compatibility with certain things? I know fetch is used to get out of callback hell, but it seems like it lacks the browser compatibility for IE that AJAX has.

[DanCouper]

No, problem is that you need to replace all of the keys as well (name needs to be "name") for example, + get rid of the ; at the end, + get rid of the !1's.

Edit: and stringify was blowing up on me, I think because it was a string to start with that iot couldn’t parse as being JS but maybe I was just doing something bad

So I have this monstrosity:

async function f() {
  const res = await fetch("https://api.github.com/gists/0d0229296e72aa8b42081729de2e2509");
  const data = await res.json();
  // We're fine at this point, when I do
  // this I get the file contents:
  console.log(data.files["sample-data.js"].content);
  // BUT IT IS JUST TEXT

  try {
    let fileText = data.files["sample-data.js"].content;
    // manually parse the JS code string into something JSON-parse-compatible
    fileText = fileText.replace(/XG = /, "");
    fileText = fileText.replace(/id: /gm, "\"id\": ");
    fileText = fileText.replace(/name: /gm, "\"name\": ");
    fileText = fileText.replace(/hash: /gm, "\"hash\": ");
    fileText = fileText.replace(/number: /gm, "\"number\": ");
    fileText = fileText.replace(/email: /gm, "\"email\": ");
    fileText = fileText.replace(/address: /gm, "\"address\": ");
    fileText = fileText.replace(/\!1/gm, "null");
    fileText = fileText.replace(/;/gm, "");
    
    const obj = JSON.parse(fileText);
    console.log(obj)
    return obj;
  } catch (err) {
    console.error(err)
  }
}

[DanCouper]

Yeah, just edited the reply, I was missing the !1 replacement which is why I couldn’t get it to go through stringify & why I ended up manually replacing everything

[DanCouper]

I mean, the general consumer operating systems IE runs on are not supported by Microsoft anymore so it’s a small concern unless you have very specific needs (Windows Server support, for example), but yeah it can be polyfilled very easily if that support is needed.