How do I run a loop through JSON code to find only specific strings in javascript?

Question

I am working with Figma API and I am parsing some JSON (this is not my entire JSON FILE). A little context about the JSON file:

• None of these JSON objects are next to each other.
• All JSON objects fall in objects but they appear sequentially
• and their are an unlimited amount of absoluteBoundingBox
• and the absoluteBoundingBox could go by other names I'm not sure what names are or would be.

The issue I'm running into is:

• I need to loop through each absoluteBoundingBox
• give that absoluteBoundingBox a unique id
• and its own x y and width and height variables`
• store those in a new variables so that the variable containing the objects will need to be created every time a absoluteBoundingBox appears.

I know this is a big scope of work. But I need to know where to start.

JSON

[{
  id: "6:3",
  absoluteBoundingBox: [{
    x: -406,
    y: -274,
    width: 437,
    height: 56
  }]
}],
[{
  id: "10:3",
  absoluteBoundingBox: [{
    x: -406,
    y: -201,
    width: 437,
    height: 56
  }]
}],
[{
  id: "10:4",
  absoluteBoundingBox: [{
    x: -406,
    y: -122,
    width: 437,
    height: 56
  }]
}],
[{
  id: "10:5",
  absoluteBoundingBox: [{
    x: -406,
    y: -28,
    width: 437,
    height: 56
  }]
}]

JS

const frameJSON = {};
const getFrame =
  args.document["children"][0]["children"][0]["absoluteBoundingBox"];

var manyFrames = args.shift().filter(function(v) {
  return args.every(function(a) {
    return a.indexOf(v) !== -1;
  });
});



var FrameID = {};
var textHeight = [];
var textWidth = [];
var textY = [];
var textX = [];
var FrameID = [];
var frameSize = getFrame.keys(getFrame).length;
frameJSON.getFrame = [];
for (b; b > frameJSON; b++) {
  if (b < getFrame.frameSize) {
    [x] = frameJSON.getFrame.push(getFrame[b].x);
    [y] = frameJSON.getFrame.push(getFrame[b].y);
    [width] = frameJSON.getFrame.push(getFrame[b].width);
    [height] = frameJSON.getFrame.push(getFrame[b].height);
    [id] = frameJSON.getFrame.push(getFrame[b].id);
  }
}

what is being returned

\ right now I am returning these variables with in my FrameJSON OBJECT I would like to crate atleast 4 FrameJSON objects.

I tried:

const getFrame =
  args.document["children"][0]["children"][0]["absoluteBoundingBox"];
  const listOfFrames = []

  //https://stackoverflow.com/questions/52672037/js-multiple-objects-in-an-array-stored-in-local-storage

  getFrame.push('absoluteBoundingBox');
  getFrame.push('id');
  showList.concat(JSON.parse(localStorage.getItem('listOfFrames')))
  localStorage.setItem("listOfFrames", JSON.stringify(listOfFrames));

in order to get a list of frames but the code isn't running like I expected.

Answer 1

Change the ( ) to [ ] in the raw JSON string and parse it as an array of 4 objects. Then you can parse the JSON object directly in a browser's developer console.

var json=" ... paste your [] wrapped JSON string here";
//edit: if you have no control over the source string, do a replacement before parsing:
json=json.replace(/\(/g,'[').replace(/\)/g,']');

var objs=eval('('+json+')');
for (k in objs){
  var obj=objs[k];
  //do whatever you want with the obj here
}

To further illustrate the difference in formatting, try this in a browser console:

objs=({a:'123',b:'xx'},{a:'222',b:'yy'});

This will give an object of one element, as the ( ) is not proper format.

But this:

objs=[{a:'123',b:'xx'},{a:'222',b:'yy'}];

gives both objects. However, when a JSON string is transported, it is a string, so the following doesn't give a proper collection, but a string:

json="[{a:'123',b:'xx'},{a:'222',b:'yy'}]";

A nice trick to convert a string representation of a JSON object is to eval it like this:

json2="([{a:'123',b:'xx'},{a:'222',b:'yy'}])";

note the added brackets!

objs=eval(json2); //this gives you a proper array

BUT, your original string has ( ) instead of [ ], so the string replacement is necessary.