Question

我一直在尝试获取图像的所有源文件并存储在单个阵列中，但是我无法抓取阵列中的所有实际图像。任何帮助将不胜感激，谢谢。

这是我的对象示例：

projects: { 
        "proj": [
            {
                id:"1",
                title:"Heller Recipes",
                description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                projectLink:"http://www.travismichael.net/HELLER-RECIPES",
                genre:"web app",
                images: [
                    {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                ]
            },
            {
                id:"2",
                title:"3D Animation",
                description:"Created using 4D Cinema Max, a 3d anitmation program that allows you to create realistic renderings and animations.",
                technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                projectLink:"http://www.google.com",
                genre:"3d",
                images: [
                    {largePic:"img/projects/4dmax.jpg",desktopImg:"img/projects/4dmaxDesktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                ]
            }
        ]
    }

到目前为止，这是我的javascript：

var projLength = portfolio.projects.proj.length;

    var images = [];
    var src = [];
    for(var i=0;i<=projLength;i++){
        images.push(portfolio.projects.proj[1]);
        console.log(i);
    }
    console.log(images);
     for(var g=0;g<=images.length-1;g++){
         src.push(images[g].largePic);
         src.push(images[1].desktopImg);
         src.push(images[1].desktopMobile);
     }
     console.log(src);

Answer 1

这是一个乱七八糟的数据结构。这是一种不假设知道像largePic这样的标签的方式（它迭代那里的任何东西）。

一步一步，这就是它的作用：

迭代proj数组
从项目数组中的每个项目获取.images属性
迭代images数组
对于images数组中的每个对象，迭代该对象的所有属性
抓取该数组中每个属性的值并将其添加到输出数组

代码：

var allImages = [];
var proj = portfolio.projects.proj;

for (var i = 0; i < proj.length; i++) {
    var imgs = proj[i].images;
    for (var j = 0; j < imgs.length; j++) {
        for (var tag in imgs[j]) {
            allImages.push(imgs[j][tag]);
        }
    }
}

工作演示：http://jsfiddle.net/jfriend00/cy2smsn8/

如果您希望直接直接引用.largePic，.desktopImg和.desktopMobile属性名称而不是迭代那里的所有属性，可以这样做：< / p>

var allImages = [];
var proj = portfolio.projects.proj;

for (var i = 0; i < proj.length; i++) {
    var imgs = proj[i].images;
    for (var j = 0; j < imgs.length; j++) {
        allImages.push(imgs[j].largePic);
        allImages.push(imgs[j].desktopImg);
        allImages.push(imgs[j].desktopMobile);
    }
}

工作演示：http://jsfiddle.net/jfriend00/3pzowgb9/

使用javascript / jquery获取带有图像数组的对象中的所有图像

1 个答案: