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

grab all images in an object with an array of images with javascript/jquery

本文关键字：图像 javascript 对象 数组 获取 使用 jquery      更新时间：2023-09-26

我一直试图获取图像的所有源文件并存储在一个数组中，但在获取数组中的所有实际图像时遇到了问题。任何帮助都将不胜感激，谢谢。

这是我的对象示例：

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

这是一个需要迭代的有点混乱的数据结构。这里有一种方法不假定知道largePic这样的标签（它迭代那里的任何东西）。

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

  1. 在proj数组上迭代
  2. 从proj数组中的每个项获取.images属性
  3. 在images阵列上迭代
  4. 对于images数组中的每个对象，迭代该对象的所有属性
  5. 获取该数组中每个属性的值，并将其添加到输出数组中

代码：

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属性名称，而不是迭代所有属性，可以这样做：

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/

相关文章：