合并json对象并填充next / prev项目 [英] Merge json-object and populate next/prev items

问题描述

我怎样才能 - 填充包含一些css-properties的JSON-Object。我需要将所有不包含的属性添加到前一个对象，并且所有下一个项目都是相同的？

我需要的语句：

  if（property is not in object）object [property] = $（'。foo'）。css（property）; 
  

例如一个元素的样式如下：

  .foo {
 top：0; 
 width：100px; 
 
 $ / code> 

以下关键帧 - 相同对象：

$ $ $ $ $ $ $ $ $ $ $ $ $ b}，
1000：{
top：100
}，
2000：{
width：100
}
};


在这种情况下，我们需要填充所有以前的项目：

• 0：width = 0


• 1000 ：width = 0

...我们得到如下所示：

  var keyframe = {
 0：{
 top：0，
 width：0 
}，
 1000：{
 top：100，
 width：0 
}，
 2000：{
 top：100，
 width：100 
} 
}; 
  

...此外，我们需要预填所有的下一个项目：$ b $

$ 2000：top = 100

结果如下：

  var keyframe = {
 0：{
 top ：0 
}，
 1000：{
 top：100 
}，
 2000：{
 top：100，
 width：100 
} 
}; 
  

我们最后的对象需要像这样：

  var keyframe = {
 0：{
 top：0，
 width：0 
}，
 1000 ：{
 top：100，
 width：0 
}，
 2000：{
 top：100，
 width：100 
} 
}; 
  

更新

TJ Crowder answer 看起来不错，但是问题是我不知道关键帧 - 对象中有什么属性。 ..因此可能的是，在关键帧中有比 width 和 top 更多/其他的属性。 p>

Update2

目前我有以下几种：

  var $ foo = $（'。foo'）; 
 for（var key in keyframe）{
 var obj = keyframe [key]; 
 for（var ok in obj）{
 if（！（ok in obj））obj [ok] = $ foo.css（ok）; 
 
 
  

但是

  if（！（ok in obj））//总是`truthy` 
  

然而，如果我直接声明它的话

  if（！（'top'in obj））// it works ... 
  

想法？

解决方案

  var all = {}; 
 $ b $ .each（keyframe，function（_，obj）{
 $ .each（obj，function（k）{
 all [k] = 0; 
}）; 
}）; 
 $ b $ .each（keyframe，function（_，obj）{
 $ .each（all，function（k）{
 if（k in obj）
 all [k] = obj [k]; 
 else 
 obj [k] = all [k]; 
}）; 
}）; 
 $ b console.log（keyframe）
 // {0：{top：0，width：0}，
 //1000：{ top：100，width：0}，
 //2000：{width：100，top：100}} 
  pre> 
How can I pre-populate an JSON-Object which contains some css-properties. Where I need to add all not-contained properties to the previous object and the same for all next up items?

The statement I need:
if (property is not in object) object[property] = $('.foo').css(property);
We have for example an element with the following styling:
.foo {
    top: 0;
    width: 100px;
}
And the following keyframe-alike object:
var keyframe = {
    0: {
        top: 0
    },
    1000: {
        top: 100
    },
    2000: {
        width: 100
    }
};
Here we need to populate all previous items, in this case:


0: width = 0
1000: width = 0


...we get something like this:
var keyframe = {
    0: {
        top: 0,
        width: 0
    },
    1000: {
        top: 100,
        width: 0
    },
    2000: {
        top: 100,
        width: 100
    }
};
...and further, we need to prefill all next items:


2000: top = 100


What results in:
var keyframe = {
    0: {
        top: 0
    },
    1000: {
        top: 100
    },
    2000: {
        top: 100,
        width: 100
    }
};
Our final object needs to be like this one:
var keyframe = {
    0: {
        top: 0,
        width: 0
    },
    1000: {
        top: 100,
        width: 0
    },
    2000: {
        top: 100,
        width: 100
    }
};


Update

T.J. Crowder answer looks good so far, however the problem is that I don't know what properties are in the keyframe-object... So it can be, that there are more/other properties in the keyframe than width and top.

Update2

Currently I've the following:
var $foo = $('.foo');
for (var key in keyframe) {
    var obj = keyframe[key];
    for(var ok in obj) {
        if (!(ok in obj)) obj[ok] = $foo.css(ok);
    }
}
But it seems that
if (!(ok in obj)) // is always `truthy`
however if I do it by declaring it directly
if (!('top' in obj)) // it works...
Any ideas?
解决方案
This appears to do what you want:
var all = {};

$.each(keyframe, function(_, obj) {
    $.each(obj, function(k) {
        all[k] = 0;
    });
});

$.each(keyframe, function(_, obj) {
    $.each(all, function(k) {
        if(k in obj)
            all[k] = obj[k];
        else
            obj[k] = all[k];
    });
});

console.log(keyframe)
// {"0":{"top":0,"width":0},
// "1000":{"top":100,"width":0},
// "2000":{"width":100,"top":100}}


                        
这篇关于合并json对象并填充next / prev项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！