…Array.from输出仅显示数组的最后一个条目。 将JSON转换为新的对象形式

Question

I am creating an object from an existing array of arrays, but when running the arrays through Object.fromEntries, Object.assign and ...Array.from I get a repetition of the last element from the array of arrays but the other element in the array iterates out as intended.

The code will show this more clearly than I can explain. I am finding it quite difficult to explain as this is quite near territory for me.

The odd thing about this problem is I have done this before, in the same file and it works. When copying the code to replicate it on another array it is not behaving as the previous rendition of the same function. Console.logging out the data at each point it is manipulated shows the data is fine, right up until the result of the ...Array.from

UPDATE: added full code to help with replication of the issue

Here is the full function/app

import React, { Component } from "react";
import data from "./data/convertedData/POSTCODES FOR DISTRICT_AVRG HOUSE PRICE - Average price.json";

class JSONCreator extends Component {
    // makeJson = () => {
    //     data.map(i => )

    // }

    // {
    //     "year":,
    //     "location":,
    //     "price":,
    //     "lat-lon":,

    // }

    render() {
        const newData = data.map(i => {
            const j = i.year;
            const values = Object.entries(j);
            Object.fromEntries = arr =>
                Object.assign(
                    {},
                    ...Array.from(arr, ([a, b]) => ({
                        year: a,
                        locationAndPrice: b
                    }))
                );
            const obj = Object.fromEntries(values);
            console.log('obj1', obj)
            return obj;
        });

        const newNewData = newData.map(i => {
            console.log('i.locationAndPrice', i.locationAndPrice)
            const j = i.locationAndPrice;
            const values = Object.entries(j);
            console.log('values', values)
            Object.fromEntries = arr =>
                Object.assign(
                    {},
                    ...Array.from(arr, ([a, b]) => ({
                        location: a,
                        price: b
                    }))
                );
            const obj = Object.fromEntries(values);
            console.log('obj', obj);
            return obj;
        });

        // const newArrayHere = newData.map(i => {
        //  const j = i.locationAndPrice;
        //     const values = Object.entries(j);
        //     console.log('values', {...[values]})

        //  // Object.fromEntries = arr =>
        //  //  Object.assign(
        //  //      {},
        //  //      ...Array.from(arr, (p, l) => ({ p, l }))
        //  //  );
        //     // const obj = Object.fromEntries(values)        

        //  // return obj;
        // });
        // console.log(newArrayHere);

        return <div>hi</div>;
    }
}

export default JSONCreator;

All that i am not showing is it is done with CRA (create-react-app) and this is a component. It is not being used in a larger scale app and is being built for the purpose of data conversion/practice.

Here is a sample of the data:

{
       "year": {
           "Jan-95": {
               "City of London": "91449",
               "Barking & Dagenham": "50460",
               "Barnet": "93285",
               "Bexley": "64958",
               "Brent": "71307",
               "Bromley": "81671",
               "Camden": "120933",
               "Croydon": "69158",
               "Ealing": "79886",
               "Enfield": "72515",
               "Greenwich": "62300",
               "Hackney": "61297",
               "Hammersmith & Fulham": "124903",
               "Haringey": "76288",
               "Harrow": "84770",
               "Havering": "68000",
               "Hillingdon": "73835",
               "Hounslow": "72232",
               "Islington": "92516",
               "Kensington & Chelsea": "182695",
               "Kingston upon Thames": "80876",
               "Lambeth": "67771",
               "Lewisham": "60491",
               "Merton": "82071",
               "Newham": "53539",
               "Redbridge": "72190",
               "Richmond upon Thames": "109326",
               "Southwark": "67885",
               "Sutton": "71537",
               "Tower Hamlets": "59865",
               "Waltham Forest": "61319",
               "Wandsworth": "88559",
               "Westminster": "133025,"
           }
       }
   },

Here is the functions that I am trying to run. Below is what I run to convert the above JSON to the next JSON object below

    const newData = data.map(i => {
            const j = i.year;
            const values = Object.entries(j);
            Object.fromEntries = arr =>
                Object.assign(
                    {},
                    ...Array.from(arr, ([a, b]) => ({
                        year: a,
                        locationAndPrice: b
                    }))
                );
            const obj = Object.fromEntries(values);
            return obj;
        });

This is he console.log returned from the above function, as expected

{ 
locationAndPrice: 
     {
         Barking & Dagenham: "50460"
         Barnet: "93285"
         Bexley: "64958"
          Brent: "71307"
         Bromley: "81671"
         Camden: "120933"
         City of London: "91449"
         Croydon: "69158"
         Ealing: "79886"
         Enfield: "72515"
         Greenwich: "62300"
         Hackney: "61297"
         Hammersmith & Fulham: "124903"
         Haringey: "76288"
         Harrow: "84770"
         Havering: "68000"
         Hillingdon: "73835"
         Hounslow: "72232"
         Islington: "92516"
         Kensington & Chelsea: "182695"
         Kingston  upon Thames: "80876"
         Lambeth: "67771"
         Lewisham: "60491"
         Merton: "82071"
         Newham: "53539"
         Redbridge: "72190"
         Richmond upon Thames: "109326"
         Southwark: "67885"
         Sutton: "71537"
         Tower Hamlets: "59865"
         Waltham Forest: "61319"
         Wandsworth: "88559"
         Westminster: "133025,"}


         year:{ "Jan-95"}
       }
}

        const newNewData = newData.map(i => {
            const j = i.locationAndPrice;
            const values = Object.entries(j);
            console.log('values', values)
            Object.fromEntries = arr =>
                Object.assign(
                    {},
                    ...Array.from(arr, ([a, b]) => ({
                        location: a,
                        price: b
                    }))
                );
            const obj = Object.fromEntries(values);
            return obj;
        });

I want to convert the above JSON data to this form

{
        "location":  "City of London",
        "price": "93285",
},

What I am getting currently is

{
              "location": "Westminster",
              "price": "406413",
},

Now the issue here is, "Westminster" is getting repeated as the location for iterations of the data. The price is iterating and uniquely.

Please ask questions so I can refine this question and get to a result.

Answer 1

UPDATE:

I ended up figuring it out on my own. Same data as mentioned in the upper most part of this question.

import React, { Component } from "react";
import data from "./data/convertedData/POSTCODES FOR DISTRICT_AVRG HOUSE PRICE - Average price.json";

class JSONCreator extends Component {
    componentDidMount() {
        this.doSomething();
    }
    doSomething = () => {
        const newData = data.map(i => {
            const j = i.year;
            const doStuff = Object.entries(j).map(([key, value]) => [key, value]);
            const entries = doStuff.map(a => ({
                year: a[0],
                locationAndPrice: a[1]
            }));
            return entries;
        });

        const newState = newData.map(i => {
            const j = i[0].year;
            return Object.entries(i[0].locationAndPrice).map(a => ({
                year: j,
                location: a[0],
                price: a[1]
            }));
        });

        console.log("newData", newState);
        this.setState({
            newState: newState
        })
    };

    render() {
        console.log("this.state", this.state);
        return <div>{JSON.stringify(this.state)}</div>;
    }
}

export default JSONCreator;