如何通过 JSON 代码运行循环以仅查找 javascript 中的特定字符串？

Question

我正在使用 Figma API 并且正在解析一些 JSON （这不是我的整个 JSON 文件）。关于 JSON 文件的一点上下文：

• 这些 JSON 对象都不相邻。
• 所有 JSON 对象都属于对象，但它们按顺序出现
• 它们是无限数量的absoluteBoundingBox
• 和 absoluteBoundingBox 可以使用其他名称，我不确定 名称是什么或将是什么。

我遇到的问题是：

• 我需要遍历每个absoluteBoundingBox
• 给absoluteBoundingBox 一个唯一的id
• 和它自己的xy和width和height变量`
• 将这些存储在一个新变量中，以便该变量包含 每次出现absoluteBoundingBox 时都需要创建对象。

我知道这是一项很大的工作。但我需要知道从哪里开始。

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);
  }
}

返回什么

\ 现在我在我的 FrameJSON OBJECT 中返回这些变量我想创建至少 4 个 FrameJSON 对象。

我试过了：

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));

为了获取帧列表，但代码没有像我预期的那样运行。

Answer 1

将原始 JSON 字符串中的 ( ) 更改为 [ ] 并将其解析为 4 个对象的数组。然后可以直接在浏览器的开发者控制台中解析 JSON 对象。

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
}

要进一步说明格式的差异，请在浏览器控制台中尝试：

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

这将给出一个元素的对象，因为 ( ) 格式不正确。

但是这个：

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

给出两个对象。然而，当一个 JSON 字符串被传输时，它是一个字符串，所以下面给出的不是正确的集合，而是一个字符串：

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

转换 JSON 对象的字符串表示的一个很好的技巧是像这样评估它：

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

注意添加的括号！

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

但是，您的原始字符串有 () 而不是 []，所以字符串替换是必要的。