1

I am traying to populate an array "array1" with objects with format {a:'value', b:'value'} that come from a greater objet "objPractice", (could be a json). I don't know what I am doing wrong but I get an array with objects all equals corresponding just with the last element of the original object. I need all of them, not just the last one.

This is the code:

let objPractice = {
books: [
    {
        isbn: "9781449325862",
        title: "Git Pocket Guide",
        subtitle: "A Working Introduction",
        author: "Richard E. Silverman",
        publish_date: "2020-06-04T08:48:39.000Z",
        publisher: "O'Reilly Media",
        pages: 234,
        description: "This pocket guide is the perfect on-the-job companion to Git, the distributed version control system. It provides a compact, readable introduction to Git for new users, as well as a reference to common commands and procedures for those of you with Git exp",
        website: "http://chimera.labs.oreilly.com/books/1230000000561/index.html"
    },
    {
        isbn: "9781449331818",
        title: "Learning JavaScript Design Patterns",
        subtitle: "A JavaScript and jQuery Developer's Guide",
        author: "Addy Osmani",
        publish_date: "2020-06-04T09:11:40.000Z",
        publisher: "O'Reilly Media",
        pages: 254,
        description: "With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-da",
        website: "http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/"
    },
    {
        isbn: "9781449337711",
        title: "Designing Evolvable Web APIs with ASP.NET",
        subtitle: "Harnessing the Power of the Web",
        author: "Glenn Block et al.",
        publish_date: "2020-06-04T09:12:43.000Z",
        publisher: "O'Reilly Media",
        pages: 238,
        description: "Design and build Web APIs for a broad range of clients—including browsers and mobile devices—that can adapt to change over time. This practical, hands-on guide takes you through the theory and tools you need to build evolvable HTTP services with Microsoft",
        website: "http://chimera.labs.oreilly.com/books/1234000001708/index.html"
    },
    {
        isbn: "9781449365035",
        title: "Speaking JavaScript",
        subtitle: "An In-Depth Guide for Programmers",
        author: "Axel Rauschmayer",
        publish_date: "2014-02-01T00:00:00.000Z",
        publisher: "O'Reilly Media",
        pages: 460,
        description: "Like it or not, JavaScript is everywhere these days-from browser to server to mobile-and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who o",
        website: "http://speakingjs.com/"
    },
    {
        isbn: "9781491904244",
        title: "You Don't Know JS",
        subtitle: "ES6 & Beyond",
        author: "Kyle Simpson",
        publish_date: "2015-12-27T00:00:00.000Z",
        publisher: "O'Reilly Media",
        pages: 278,
        description: "No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. As part of the \\\"You Don’t Know JS\\\" series, this compact guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the st",
        website: "https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20&%20beyond"
    },
    {
        isbn: "9781491950296",
        title: "Programming JavaScript Applications",
        subtitle: "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",
        author: "Eric Elliott",
        publish_date: "2014-07-01T00:00:00.000Z",
        publisher: "O'Reilly Media",
        pages: 254,
        description: "Take advantage of JavaScript's power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flex",
        website: "http://chimera.labs.oreilly.com/books/1234000000262/index.html"
    },
    {
        isbn: "9781593275846",
        title: "Eloquent JavaScript, Second Edition",
        subtitle: "A Modern Introduction to Programming",
        author: "Marijn Haverbeke",
        publish_date: "2014-12-14T00:00:00.000Z",
        publisher: "No Starch Press",
        pages: 472,
        description: "JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale ",
        website: "http://eloquentjavascript.net/"
    },
    {
        isbn: "9781593277574",
        title: "Understanding ECMAScript 6",
        subtitle: "The Definitive Guide for JavaScript Developers",
        author: "Nicholas C. Zakas",
        publish_date: "2016-09-03T00:00:00.000Z",
        publisher: "No Starch Press",
        pages: 352,
        description: "ECMAScript 6 represents the biggest update to the core of JavaScript in the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C. Zakas provides a complete guide to the object types, syntax, and other exciting changes that E",
        website: "https://leanpub.com/understandinges6/read"
    }
]}

And here is the code to populate the new array "array1"

let obj1 = { isbn: "", title: "" }

let array1 = []

for (var i=0; i < objPractica.books.length - 1; i++) {
    obj1.isbn = objPractica.books[i].isbn
    obj1.title = objPractica.books[i].title

array1.push(obj1)
}
console.log("The array [] that contains object with format {a:'value', b:'value'} is: ", array1)

But these is the result that I am getting:

    The array [] that contains object with format {a:'value', b:'value'} is:  [
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  },
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  },
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  },
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  },
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  },
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  },
  {
    isbn: '9781593275846',
    title: 'Eloquent JavaScript, Second Edition'
  }
]

As you can see, I just get only the last element from the original object. Why is that?

German Larcher
  • 41
  • 1
  • 5

1 Answers1

1

This is a fun learning experience about object references (see this article for some short reading). Follow my comments in this code snippet:

// You are creating an object here:
let obj1 = { isbn: "", title: "" } 

let array1 = []

for (var i=0; i < objPractice.books.length - 1; i++) {
    // You are changing properties on the _existing_ object "obj1" here:
    obj1.isbn = objPractice.books[i].isbn
    obj1.title = objPractice.books[i].title

    // You are pushing another copy of "obj1" into the array.
    array1.push(obj1)
}

You are not creating a new object in each iteration of your for loop. You are just changing the properties on the existing object (obj1) and adding another copy of it to your array.

How about this:

for (var i=0; i < objPractice.books.length - 1; i++) {
    array1.push({
        isbn: objPractice.books[i].isbn,
        title: objPractice.books[i].title
    })
}

or even better still, use some of the helpful Array prototype methods like map to make this even simpler:

const array1 = objPractice.books.map(book => ({
  isbn: book.isbn,
  title: book.title
}))
Charlie Schliesser
  • 7,851
  • 4
  • 46
  • 76