Question

我是JavaScript和AngularJS的新手。我试图循环一个对象，得到它的键值对，然后用它来构建一个新对象数组。

var actorMovie = {
    "Leonardo DiCaprio" : "The Revenant",
    "Christian Bale" : "The Dark Knight Rises",
    "Sylvester Stallone" : "Rocky"
};

if(actorMovie){
    var actorMovieArray = [];
    angular.forEach(actorMovie, function(value, key) {
        actorMovieArray.push ({key: {
            "Movies": {
                "Best Movie": value
            }
        }});
    });
}

console.log(actorMovieArray);

此控制台日志打印出正确的值，但键仍为“键”，并且永远不会按预期更新为actor的名称。我在这做错了什么？我试着寻找答案，但没有找到任何解决方案。我错过了什么吗？

Answer 1

我会做像

这样的事情

if(isset($_POST['imgdetails1'])){
    echo"
        <input type='image' src='admin/product_images/$pro_image2'  class='imgdetails5' />";
    }

在您的代码中，javascript不知道您要评估angular.forEach(actorMovie, function(value, key) { actorMovieArray[key]= { "Movies": { "Best Movie": value } }; });变量以分配属性，并将密钥视为key字符串。

Answer 2

正如@Hugues指出的那样，JavaScript无法知道您是将该键表示为文字还是变量，因此使用了字面值。

请注意，答案的行为与您在问题中的表现方式不同。使用密钥作为数组标识符有两个缺点：

无法保留迭代密钥时项目的顺序
如果有两个项具有相同的键（此处为演员姓名），则只会在覆盖一些先前添加的值时在结果中获得一个。（实际情况并非如此，因为您的输入已经是对象文字，因此重复键无关紧要，但切换到其他输入时可能会出现问题，例如项目数组）

只要订单无关紧要并且您知道您的钥匙是独一无二的，这对您来说也没关系。如果您想要问题中定义的结构，请考虑以下代码段：

function buildItem(value, key) {
  var res = {};
  res[key] = {
            "Movies": {
                "Best Movie": value
            }
        };
  return res;
}

if(actorMovie){
    var actorMovieArray = [];
    angular.forEach(actorMovie, function(value, key) {
        actorMovieArray.push(buildItem(value, key));
    });
}

试试这个jsbin：http://jsbin.com/luborejini/edit?js,console

Answer 3

我会在结果数组上使用Object.keys和Array.forEach。而且我也会接受Javascript的功能性。这样你就可以轻松地将创建者函数拉出到你的api json数据的工厂映射库中。

if(actorMovie){
var actorMovieArray = [];
Object.keys(actorMovie).forEach(function(actor){
    actorMovieArray[actor] = function(){
        return {
            Movies: {
                BestMovie: actorMovie[actor]
            }
        };
    }();
});

}

我还建议不要使用actor名称作为数组中的键。我宁愿将其映射到模型结构，它会使您的视图/控制器更清晰，更容易理解：

if(actorMovie){
var actorMovieArray = [];
Object.keys(actorMovie).forEach(function(actor) {
    actorMovieArray.push(function(){
        return {
            Actor: actor,
            Movies: {
                BestMovie: actorMovie[actor]
            }
        };
    }());
});

}

这将引导您进入更简洁的视图模型，并在您的结构到位后为您设置简单的重构。至少在我看来，这也将使测试变得更容易。

AngularJS循环对象以构建对象数组

3 个答案: